Skip to content

Commit 77e4b30

Browse files
mylee1995mylee1995
committed
got d3 working
1 parent 8b7a456 commit 77e4b30

File tree

8 files changed

+724
-14
lines changed

8 files changed

+724
-14
lines changed

‎d3index.html

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
Popular / About d3noob’s Block 8375092
2+
Updated July 29, 2019
3+
Interactive d3.js tree diagram
4+
5+
Open
6+
This is a d3.js tree diagram that incldes an interactive element as used as an example in the book D3 Tips and Tricks.
7+
8+
Any parent node can be clicked on to collapse the portion of the tree below it, on itself. Conversly, it can be clicked on again to regrow.
9+
10+
It is derived from the Mike Bostock Collapsible tree example but it is a slightly cut down version.
11+
12+
index.html#
13+
<!DOCTYPE html>
14+
<html lang="en">
15+
<head>
16+
<meta charset="utf-8">
17+
18+
<title>Tree Example</title>
19+
20+
<style>
21+
22+
.node {
23+
cursor: pointer;
24+
}
25+
26+
.node circle {
27+
fill: #fff;
28+
stroke: steelblue;
29+
stroke-width: 3px;
30+
}
31+
32+
.node text {
33+
font: 12px sans-serif;
34+
}
35+
36+
.link {
37+
fill: none;
38+
stroke: #ccc;
39+
stroke-width: 2px;
40+
}
41+
42+
</style>
43+
44+
</head>
45+
46+
<body>
47+
48+
<!-- load the d3.js library -->
49+
<script src="http://d3js.org/d3.v3.min.js"></script>
50+
51+
<script>
52+
53+
var treeData = [
54+
{
55+
"name": "Top Level",
56+
"parent": "null",
57+
"children": [
58+
{
59+
"name": "Level 2: A",
60+
"parent": "null",
61+
"children": [
62+
{
63+
"name": "Son of A",
64+
"parent": "Level 2: A"
65+
},
66+
{
67+
"name": "Daughter of A",
68+
"parent": "Level 2: A"
69+
}
70+
]
71+
},
72+
{
73+
"name": "Level 2: B",
74+
"parent": "Top Level"
75+
}
76+
]
77+
}
78+
];
79+
80+
81+
// ************** Generate the tree diagram *****************
82+
var margin = {top: 20, right: 120, bottom: 20, left: 120},
83+
width = 960 - margin.right - margin.left,
84+
height = 500 - margin.top - margin.bottom;
85+
86+
var i = 0,
87+
duration = 750,
88+
root;
89+
90+
var tree = d3.layout.tree()
91+
.size([height, width]);
92+
93+
var diagonal = d3.svg.diagonal()
94+
.projection(function(d) { return [d.y, d.x]; });
95+
96+
var svg = d3.select("body").append("svg")
97+
.attr("width", width + margin.right + margin.left)
98+
.attr("height", height + margin.top + margin.bottom)
99+
.append("g")
100+
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
101+
102+
root = treeData[0];
103+
root.x0 = height / 2;
104+
root.y0 = 0;
105+
106+
update(root);
107+
108+
d3.select(self.frameElement).style("height", "500px");
109+
110+
function update(source) {
111+
112+
// Compute the new tree layout.
113+
var nodes = tree.nodes(root).reverse(),
114+
links = tree.links(nodes);
115+
116+
// Normalize for fixed-depth.
117+
nodes.forEach(function(d) { d.y = d.depth * 180; });
118+
119+
// Update the nodes…
120+
var node = svg.selectAll("g.node")
121+
.data(nodes, function(d) { return d.id || (d.id = ++i); });
122+
123+
// Enter any new nodes at the parent's previous position.
124+
var nodeEnter = node.enter().append("g")
125+
.attr("class", "node")
126+
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
127+
.on("click", click);
128+
129+
nodeEnter.append("circle")
130+
.attr("r", 1e-6)
131+
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
132+
133+
nodeEnter.append("text")
134+
.attr("x", function(d) { return d.children || d._children ? -13 : 13; })
135+
.attr("dy", ".35em")
136+
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
137+
.text(function(d) { return `${d.name} plus ${d.parent}`; })
138+
// .text(function(d) { return d.parent })
139+
.style("fill-opacity", 1e-6);
140+
141+
// Transition nodes to their new position.
142+
var nodeUpdate = node.transition()
143+
.duration(duration)
144+
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
145+
146+
nodeUpdate.select("circle")
147+
.attr("r", 10)
148+
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
149+
150+
nodeUpdate.select("text")
151+
.style("fill-opacity", 1);
152+
153+
// Transition exiting nodes to the parent's new position.
154+
var nodeExit = node.exit().transition()
155+
.duration(duration)
156+
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
157+
.remove();
158+
159+
nodeExit.select("circle")
160+
.attr("r", 1e-6);
161+
162+
nodeExit.select("text")
163+
.style("fill-opacity", 1e-6);
164+
165+
// Update the links…
166+
var link = svg.selectAll("path.link")
167+
.data(links, function(d) { return d.target.id; });
168+
169+
// Enter any new links at the parent's previous position.
170+
link.enter().insert("path", "g")
171+
.attr("class", "link")
172+
.attr("d", function(d) {
173+
var o = {x: source.x0, y: source.y0};
174+
return diagonal({source: o, target: o});
175+
});
176+
177+
// Transition links to their new position.
178+
link.transition()
179+
.duration(duration)
180+
.attr("d", diagonal);
181+
182+
// Transition exiting nodes to the parent's new position.
183+
link.exit().transition()
184+
.duration(duration)
185+
.attr("d", function(d) {
186+
var o = {x: source.x, y: source.y};
187+
return diagonal({source: o, target: o});
188+
})
189+
.remove();
190+
191+
// Stash the old positions for transition.
192+
nodes.forEach(function(d) {
193+
d.x0 = d.x;
194+
d.y0 = d.y;
195+
});
196+
}
197+
198+
// Toggle children on click.
199+
function click(d) {
200+
if (d.children) {
201+
d._children = d.children;
202+
d.children = null;
203+
} else {
204+
d.children = d._children;
205+
d._children = null;
206+
}
207+
update(d);
208+
}
209+
210+
</script>
211+
212+
</body>
213+
</html>
214+
LICENSE#
215+
This block appears to have no license. Please contact the author to request a license.

0 commit comments

Comments
 (0)