Addressing issue dagrejs#150 - cluster styling; updated demo

cosdyt · May 14, 2015 · 3488d7e · 3488d7e
1 parent 952f467
commit 3488d7e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/demo/clusters.html b/demo/clusters.html
@@ -55,9 +55,9 @@ <h1>Dagre D3 Demo: Clusters</h1>
 g.setNode('e', {label: 'E'});
 g.setNode('f', {label: 'F'});
 g.setNode('g', {label: 'G'});
-g.setNode('group', {label: 'Group', clusterLabelPos: 'top'});
-g.setNode('top_group', {label: 'Top Group', clusterLabelPos: 'bottom'});
-g.setNode('bottom_group', {label: 'Bottom Group'});
+g.setNode('group', {label: 'Group', clusterLabelPos: 'top', style: 'fill: #d3d7e8'});
+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');

diff --git a/lib/create-clusters.js b/lib/create-clusters.js
@@ -26,4 +26,10 @@ function createClusters(selection, g) {
         labelGroup = thisGroup.append("g").attr("class", "label");
     addLabel(labelGroup, node, node.clusterLabelPos);
   });
+
+  svgClusters.selectAll("rect").each(function(c) {
+    var node = g.node(c);
+    var domCluster = d3.select(this);
+    util.applyStyle(domCluster, node.style);
+  });
 }