Skip to content

Commit 8d7bd91

Browse files
mbostockmbostock
committed
Add links methods to cluster & tree.
This method can be used to generate an array of parent+child objects for a given array of nodes. This is convenient for drawing paths from parent to child in node-link diagrams.
1 parent 60b6a3d commit 8d7bd91

8 files changed

Lines changed: 35 additions & 69 deletions

File tree

‎d3.layout.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -783,6 +783,7 @@ d3.layout.cluster = function() {
783783
cluster.sort = d3.rebind(cluster, hierarchy.sort);
784784
cluster.children = d3.rebind(cluster, hierarchy.children);
785785
cluster.value = d3.rebind(cluster, hierarchy.value);
786+
cluster.links = d3_layout_treeLinks;
786787

787788
cluster.separation = function(x) {
788789
if (!arguments.length) return separation;
@@ -950,6 +951,7 @@ d3.layout.tree = function() {
950951
tree.sort = d3.rebind(tree, hierarchy.sort);
951952
tree.children = d3.rebind(tree, hierarchy.children);
952953
tree.value = d3.rebind(tree, hierarchy.value);
954+
tree.links = d3_layout_treeLinks;
953955

954956
tree.separation = function(x) {
955957
if (!arguments.length) return separation;
@@ -966,6 +968,15 @@ d3.layout.tree = function() {
966968
return tree;
967969
};
968970

971+
// Returns an array parent+child objects for the specified nodes.
972+
function d3_layout_treeLinks(nodes) {
973+
return d3.merge(nodes.map(function(parent) {
974+
return (parent.children || []).map(function(child) {
975+
return {parent: parent, child: child};
976+
});
977+
}));
978+
}
979+
969980
function d3_layout_treeSeparation(a, b) {
970981
return a.parent == b.parent ? 1 : 2;
971982
}

‎d3.layout.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/cluster/cluster-radial.js‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,10 @@ var vis = d3.select("#chart").append("svg:svg")
1414
d3.json("flare.json", function(json) {
1515
var nodes = cluster(d3.entries(json)[0]);
1616

17-
var link = vis.selectAll("g.link")
18-
.data(nodes)
19-
.enter().append("svg:g")
20-
.attr("class", "link");
21-
22-
link.selectAll("path")
23-
.data(children)
17+
var link = vis.selectAll("path.link")
18+
.data(cluster.links(nodes))
2419
.enter().append("svg:path")
20+
.attr("class", "link")
2521
.attr("d", path);
2622

2723
var node = vis.selectAll("g.node")
@@ -40,16 +36,6 @@ d3.json("flare.json", function(json) {
4036
.attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
4137
.text(function(d) { return d.data.key; });
4238

43-
// Returns parent+child objects for any children of `d`.
44-
function children(d) {
45-
return (d.children || []).map(function(v) {
46-
return {
47-
parent: d,
48-
child: v
49-
};
50-
});
51-
}
52-
5339
// Computes a pretty Bézier curve from parent to child. TODO reusable helper?
5440
function path(d) {
5541
var y0 = (d.parent.y + d.child.y) / 2,

‎examples/cluster/cluster.js‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,10 @@ var vis = d3.select("#chart").append("svg:svg")
1515
d3.json("flare.json", function(json) {
1616
var nodes = cluster(d3.entries(json)[0]);
1717

18-
var link = vis.selectAll("g.link")
19-
.data(nodes)
20-
.enter().append("svg:g")
21-
.attr("class", "link");
22-
23-
link.selectAll("path")
24-
.data(children)
18+
var link = vis.selectAll("path.link")
19+
.data(cluster.links(nodes))
2520
.enter().append("svg:path")
21+
.attr("class", "link")
2622
.attr("d", path);
2723

2824
var node = vis.selectAll("g.node")
@@ -40,16 +36,6 @@ d3.json("flare.json", function(json) {
4036
.attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
4137
.text(function(d) { return d.data.key; });
4238

43-
// Returns parent+child objects for any children of `d`.
44-
function children(d) {
45-
return (d.children || []).map(function(v) {
46-
return {
47-
parent: d,
48-
child: v
49-
};
50-
});
51-
}
52-
5339
// Computes a pretty Bézier curve from parent to child. TODO reusable helper?
5440
function path(d) {
5541
var y = (d.parent.y + d.child.y) / 2,

‎examples/tree/tree-radial.js‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,10 @@ var vis = d3.select("#chart").append("svg:svg")
1515
d3.json("flare.json", function(json) {
1616
var nodes = tree(d3.entries(json)[0]);
1717

18-
var link = vis.selectAll("g.link")
19-
.data(nodes)
20-
.enter().append("svg:g")
21-
.attr("class", "link");
22-
23-
link.selectAll("path")
24-
.data(children)
18+
var link = vis.selectAll("path.link")
19+
.data(tree.links(nodes))
2520
.enter().append("svg:path")
21+
.attr("class", "link")
2622
.attr("d", path);
2723

2824
var node = vis.selectAll("g.node")
@@ -41,16 +37,6 @@ d3.json("flare.json", function(json) {
4137
.attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
4238
.text(function(d) { return d.data.key; });
4339

44-
// Returns parent+child objects for any children of `d`.
45-
function children(d) {
46-
return (d.children || []).map(function(v) {
47-
return {
48-
parent: d,
49-
child: v
50-
};
51-
});
52-
}
53-
5440
// Computes a pretty Bézier curve from parent to child. TODO reusable helper?
5541
function path(d) {
5642
var y0 = (d.parent.y + d.child.y) / 2,

‎examples/tree/tree.js‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,10 @@ var vis = d3.select("#chart").append("svg:svg")
1515
d3.json("flare.json", function(json) {
1616
var nodes = tree(d3.entries(json)[0]);
1717

18-
var link = vis.selectAll("g.link")
19-
.data(nodes)
20-
.enter().append("svg:g")
21-
.attr("class", "link");
22-
23-
link.selectAll("path")
24-
.data(children)
18+
var link = vis.selectAll("path.link")
19+
.data(tree.links(nodes))
2520
.enter().append("svg:path")
21+
.attr("class", "link")
2622
.attr("d", path);
2723

2824
var node = vis.selectAll("g.node")
@@ -40,16 +36,6 @@ d3.json("flare.json", function(json) {
4036
.attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
4137
.text(function(d) { return d.data.key; });
4238

43-
// Returns parent+child objects for any children of `d`.
44-
function children(d) {
45-
return (d.children || []).map(function(v) {
46-
return {
47-
parent: d,
48-
child: v
49-
};
50-
});
51-
}
52-
5339
// Computes a pretty Bézier curve from parent to child. TODO reusable helper?
5440
function path(d) {
5541
var y = (d.parent.y + d.child.y) / 2,

‎src/layout/cluster.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ d3.layout.cluster = function() {
4242
cluster.sort = d3.rebind(cluster, hierarchy.sort);
4343
cluster.children = d3.rebind(cluster, hierarchy.children);
4444
cluster.value = d3.rebind(cluster, hierarchy.value);
45+
cluster.links = d3_layout_treeLinks;
4546

4647
cluster.separation = function(x) {
4748
if (!arguments.length) return separation;

‎src/layout/tree.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ d3.layout.tree = function() {
128128
tree.sort = d3.rebind(tree, hierarchy.sort);
129129
tree.children = d3.rebind(tree, hierarchy.children);
130130
tree.value = d3.rebind(tree, hierarchy.value);
131+
tree.links = d3_layout_treeLinks;
131132

132133
tree.separation = function(x) {
133134
if (!arguments.length) return separation;
@@ -144,6 +145,15 @@ d3.layout.tree = function() {
144145
return tree;
145146
};
146147

148+
// Returns an array parent+child objects for the specified nodes.
149+
function d3_layout_treeLinks(nodes) {
150+
return d3.merge(nodes.map(function(parent) {
151+
return (parent.children || []).map(function(child) {
152+
return {parent: parent, child: child};
153+
});
154+
}));
155+
}
156+
147157
function d3_layout_treeSeparation(a, b) {
148158
return a.parent == b.parent ? 1 : 2;
149159
}

0 commit comments

Comments
 (0)