D3 multi nested groups with data

without test margin

by ihope

HTML

<div id='my_custom_menu' style='width:150px;display:none'>
    <ul>
        <li><a href='#'>Hello</a>

        </li>
        <li><a href='#'>Hello Again</a>

        </li>
    </ul>
</div>

CSS

.nodeL:hover, .nodeR:hover {
    fill:Black;
}
.nodeListLeft:hover {
    opacity:0.7
}
@font-face {
    font-family:'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
    font-family:'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
    font-family:'Open Sans';
    font-style: normal;
    font-weight: 500;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
    font-family:'Open Sans';
    font-style: italic;
    font-weight: 300;
    src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxh_xHqYgAV9Bl_ZQbYUxnQU.woff) format('woff');
}
@font-face {
    font-family:'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
    font-family:'Open Sans';
    font-style: italic;
    font-weight: 700;
    src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxjqR_3kx9_hJXbbyU8S6IN0.woff) format('woff');
}
* {
    font-size: 8.5pt;
    font-family:"Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif
}

JavaScript

data = {};
data.blocks = [{
    name: 'Islam Ali M. Sayed Ahmed...',
    id: 'block1',
    x: 0,
    y: 0,
    inputs: {
        'in': {},
            'is': {},
        length: 2
    },
    outputs: [{}, {
        id: 'is2'
    },

    ]
}, {
    name: 'test 2',
    id: 'block2',
    x: 220,
    y: 0,
    inputs: {
        'in': {},
            'is': {},
        length: 2
    },
    outputs: ['in2', 'is2']
}];
data.links = [{
    source: 'block1.out1',
    distination: 'block2.in2'
}]
drag = d3.behavior.drag()
    .origin(Object)
    .on("drag", function (d) {
    d.x = d3.event.x;
    d.y = d3.event.y;
    draw();
});

svg = d3.select("body")
    .append("svg:svg")
    .attr("width", 600)
    .attr("height", 600).on("contextmenu", function (data, index) {
    console.log(data)
    var position = d3.mouse(this);
    d3.select('#my_custom_menu')
        .style('position', 'absolute')
        .style('left', position[0] + "px")
        .style('top', position[1] + "px")
        .style('display', 'block');

    d3.event.preventDefault();
});;

function draw() {
    g = svg.selectAll("g.block")
        .data(data.blocks);
    g.attr("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")";
    });

    gEnter = g.enter()
        .append("g")
        .classed('block', true)
        .attr("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")";
    })
        .call(drag);

    gEnter.append("rect")
    .classed('body', true)
    .attr("height", function (d) {
        
    })
    .attr("rx", 5)
    .attr("ry", 5)
    .attr("width", 200)
    .attr("fill", "#0F00FF");

    gEnter.append("text")
        .text(function (d) {
        return d.name;
    }).classed('title', true)
        .attr("y", 15).attr("x", 05).attr("fill", "#FFF0FF");

    nodeList = gEnter.append("g")
        .classed('editor', true).attr("transform", function (d) {
        return "translate(" + 0 + "," + 30 + ")";
    });

    nodeList = gEnter.append("g")
 ...