// Create the input graph var g = new dagreD3.graphlib.Graph({compound:true}) .setGraph({}) .setDefaultEdgeLabel(function() { return {}; }); // Here we're setting the nodes g.setNode('a', {label: 'A'}); g.setNode('b', {label: 'B'}); g.setNode('c', {label: 'C'}); g.setNode('d', {label: 'D'}); g.setNode('e', {label: 'E'}); g.setNode('f', {label: 'F'}); g.setNode('g', {label: 'G'}); g.setNode('group', {label: 'Group', clusterLabelPos: 'top', style: 'fill: #ae9'}); g.setNode('top_group', {label: 'Top Group', clusterLabelPos: 'bottom', style: 'fill: #ffd47f'}); g.setNode('bottom_group', {label: 'Bottom Group', style: 'fill: #5f9488'}); // Set the parents to define which nodes belong to which cluster g.setParent('top_group', 'group'); g.setParent('bottom_group', 'group'); g.setParent('b', 'top_group'); g.setParent('c', 'bottom_group'); g.setParent('d', 'bottom_group'); g.setParent('e', 'bottom_group'); g.setParent('f', 'bottom_group'); // Set up edges, no special attributes. g.setEdge('a', 'b'); g.setEdge('b', 'c'); g.setEdge('b', 'd'); g.setEdge('b', 'e'); g.setEdge('b', 'f'); g.setEdge('b', 'g'); g.nodes().forEach(function(v) { var node = g.node(v); // Round the corners of the nodes node.rx = node.ry = 5; }); // Create the renderer var render = new dagreD3.render(); // Set up an SVG group so that we can translate the final graph. var svg = d3.select("svg"), svgGroup = svg.append("g"); // Run the renderer. This is what draws the final graph. render(d3.select("svg g"), g); // Center the graph var xCenterOffset = (svg.attr("width") - g.graph().width) / 2; svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)"); svg.attr("height", g.graph().height + 40);
<h1>D3js graph Clusters</h1> <svg id="svg-canvas" width=960 height=600></svg>
body { font-family: sans-serif; color: #444; } .clusters rect { fill: #00ffd0; stroke: #999; stroke-width: 1.5px; } text { font-weight: 300; font-family: "Helvetica Neue", Helvetica, Arial, sans-serf; font-size: 14px; } .node rect { stroke: #999; fill: #fff; stroke-width: 1.5px; } .edgePath path { stroke: #333; stroke-width: 1.5px; }