From bbb8c716a13c9bf1b700530d7f6c7b89a5f075c6 Mon Sep 17 00:00:00 2001 From: Courtney Miller Date: Mon, 27 Apr 2015 12:54:34 -1000 Subject: [PATCH] Adding labels to clusters with option of 'top' or 'bottom' (defaults to middle) location using clusterLabelPos as an option for setNode. --- demo/clusters.html | 102 +++++++++++++++++++++++++++++++++++++++ lib/create-clusters.js | 20 +++----- lib/label/add-label.js | 14 +++++- lib/position-clusters.js | 34 +++++++++++++ lib/render.js | 2 + 5 files changed, 158 insertions(+), 14 deletions(-) create mode 100644 demo/clusters.html create mode 100644 lib/position-clusters.js diff --git a/demo/clusters.html b/demo/clusters.html new file mode 100644 index 00000000..ac635e57 --- /dev/null +++ b/demo/clusters.html @@ -0,0 +1,102 @@ + + + +Dagre D3 Demo: Clusters + + + + + +

Dagre D3 Demo: Clusters

+ + + + + +
+

An example of visualizing clusters. This example shows +how clusters can be applied to a rendered graph. +

+ + + + diff --git a/lib/create-clusters.js b/lib/create-clusters.js index 09cc91d1..28cb9b51 100644 --- a/lib/create-clusters.js +++ b/lib/create-clusters.js @@ -1,4 +1,5 @@ -var util = require("./util"); +var util = require("./util"), + addLabel = require("./label/add-label"); module.exports = createClusters; @@ -19,15 +20,10 @@ function createClusters(selection, g) { util.applyTransition(svgClusters, g) .style("opacity", 1); - util.applyTransition(svgClusters.selectAll("rect"), g) - .attr("width", function(v) { return g.node(v).width; }) - .attr("height", function(v) { return g.node(v).height; }) - .attr("x", function(v) { - var node = g.node(v); - return node.x - node.width / 2; - }) - .attr("y", function(v) { - var node = g.node(v); - return node.y - node.height / 2; - }); + svgClusters.each(function(v) { + var node = g.node(v), + thisGroup = d3.select(this), + labelGroup = thisGroup.append("g").attr("class", "label"); + addLabel(labelGroup, node, node.clusterLabelPos); + }); } diff --git a/lib/label/add-label.js b/lib/label/add-label.js index e892f785..20fbd59c 100644 --- a/lib/label/add-label.js +++ b/lib/label/add-label.js @@ -3,7 +3,7 @@ var addTextLabel = require("./add-text-label"), module.exports = addLabel; -function addLabel(root, node) { +function addLabel(root, node, location) { var label = node.label; var labelSvg = root.append("g"); @@ -16,8 +16,18 @@ function addLabel(root, node) { } var labelBBox = labelSvg.node().getBBox(); + switch(location) { + case "top": + y = (-node.height / 2); + break; + case "bottom": + y = (node.height / 2) - labelBBox.height; + break; + default: + y = (-labelBBox.height / 2); + } labelSvg.attr("transform", - "translate(" + (-labelBBox.width / 2) + "," + (-labelBBox.height / 2) + ")"); + "translate(" + (-labelBBox.width / 2) + "," + y + ")"); return labelSvg; } diff --git a/lib/position-clusters.js b/lib/position-clusters.js new file mode 100644 index 00000000..21d44053 --- /dev/null +++ b/lib/position-clusters.js @@ -0,0 +1,34 @@ +"use strict"; + +var util = require("./util"), + d3 = require("./d3"); + +module.exports = positionClusters; + +function positionClusters(selection, g) { + var created = selection.filter(function() { return !d3.select(this).classed("update"); }); + + function translate(v) { + var node = g.node(v); + return "translate(" + node.x + "," + node.y + ")"; + } + + created.attr("transform", translate); + + util.applyTransition(selection, g) + .style("opacity", 1) + .attr("transform", translate); + + util.applyTransition(created.selectAll("rect"), g) + .attr("width", function(v) { return g.node(v).width; }) + .attr("height", function(v) { return g.node(v).height; }) + .attr("x", function(v) { + var node = g.node(v); + return -node.width / 2; + }) + .attr("y", function(v) { + var node = g.node(v); + return -node.height / 2; + }); + +} diff --git a/lib/render.js b/lib/render.js index 1610b899..7f14f4f3 100644 --- a/lib/render.js +++ b/lib/render.js @@ -11,6 +11,7 @@ function render() { createEdgePaths = require("./create-edge-paths"), positionNodes = require("./position-nodes"), positionEdgeLabels = require("./position-edge-labels"), + positionClusters = require("./position-clusters"), shapes = require("./shapes"), arrows = require("./arrows"); @@ -29,6 +30,7 @@ function render() { positionEdgeLabels(edgeLabels, g); createEdgePaths(edgePathsGroup, g, arrows); createClusters(clustersGroup, g); + positionClusters(clustersGroup.selectAll("g.cluster"), g); postProcessGraph(g); };