Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding labels to clusters #156

Merged
merged 1 commit into from
Apr 28, 2015
Merged

Adding labels to clusters #156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 102 additions & 0 deletions demo/clusters.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<!doctype html>

<meta charset="utf-8">
<title>Dagre D3 Demo: Clusters</title>

<link rel="stylesheet" href="demo.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="../build/dagre-d3.js"></script>

<h1>Dagre D3 Demo: Clusters</h1>

<style id="css">
.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;
}
</style>

<svg id="svg-canvas" width=960 height=600></svg>

<section>
<p>An example of visualizing clusters. This example shows
how clusters can be applied to a rendered graph.
</section>

<script id="js">
// 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'});
g.setNode('top_group', {label: 'Top Group', clusterLabelPos: 'bottom'});
g.setNode('bottom_group', {label: 'Bottom Group'});

// 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);
</script>

<script src="demo.js"></script>
20 changes: 8 additions & 12 deletions lib/create-clusters.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
var util = require("./util");
var util = require("./util"),
addLabel = require("./label/add-label");

module.exports = createClusters;

Expand All @@ -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);
});
}
14 changes: 12 additions & 2 deletions lib/label/add-label.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");

Expand All @@ -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;
}
34 changes: 34 additions & 0 deletions lib/position-clusters.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
});

}
2 changes: 2 additions & 0 deletions lib/render.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");

Expand All @@ -29,6 +30,7 @@ function render() {
positionEdgeLabels(edgeLabels, g);
createEdgePaths(edgePathsGroup, g, arrows);
createClusters(clustersGroup, g);
positionClusters(clustersGroup.selectAll("g.cluster"), g);

postProcessGraph(g);
};
Expand Down