Skip to content

Instantly share code, notes, and snippets.

@plmrry

plmrry/index.html

Last active August 29, 2015 14:27
Show Gist options
  • Save plmrry/485ff128b0721626642a to your computer and use it in GitHub Desktop.
Save plmrry/485ff128b0721626642a to your computer and use it in GitHub Desktop.
Download ZIP
Tree Update Pattern
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
var width = 300, height = 300, margin = { top: 50, left: 50, bottom: 50, right: 50 };
var g = d3.select("body")
.append("svg")
.attr({
width: width + margin.left + margin.right,
height: height + margin.top + margin.bottom
})
.style({ "margin-left": 200 })
.append("g")
.attr({
transform: "translate(" + [margin.left, margin.top] + ")"
});
var hierarchyA = {
name: "a",
children: [
{
name: "b",
children: [ {name: "e"} ]
},
{
name: "c",
children: [ {name: "f"}, {name: "g"}, {name: "h"} ]
}
]
};
var hierarchyB = {
name: "a",
children: [
{
name: "b",
children: [ {name: "d"}, {name: "e"} ]
},
{
name: "c",
children: [ {name: "f"}, {name: "g"} ]
},
{
name: "i",
children: [ {name: "j"} ],
foo: 234234
}
]
};
var hierarchy = hierarchyA;
var tree = d3.layout.tree()
.size([ width, height ])
.children(function(d) { return d.children; });
var linkG = g.append("g").classed("links", true);
var nodeG = g.append("g").classed("nodes", true);
function update() {
var nodes = tree(hierarchy);
var links = tree.links(nodes);
//////////////
// Links
//////////////
var link = linkG.selectAll("g.link")
.data(links, function(d) { return d.source.name + d.target.name; });
link.select("line")
.transition().duration(1000)
.attr({
x1: function(d) { return d.source.x; },
x2: function(d) { return d.target.x; },
y1: function(d) { return d.source.y; },
y2: function(d) { return d.target.y; }
});
link.enter().append("g").classed("link", true)
.append("line")
.attr({
x1: function(d) { return d.source.x; },
x2: function(d) { return d.target.x; },
y1: function(d) { return d.source.y; },
y2: function(d) { return d.target.y; }
})
.style({ stroke: "#444", "stroke-opacity": 0 })
.transition().duration(1000)
.style({ "stroke-opacity": 1 });
link.exit()
.transition().duration(1000)
.call(function(t) {
t.select("line")
.style({ "stroke-opacity": 0 });
})
.remove();
//////////////
// Nodes
//////////////
// DATA JOIN
var node = nodeG.selectAll("g.node")
.data(nodes, function(d) { return d.name; });
// UPDATE
node.transition().duration(1000)
.attr({
transform: function(d) { return "translate(" + [d.x, d.y] + ")"; }
});
// EXIT
node.exit()
.transition().duration(1000)
.call(function(t) {
t.select("circle")
.style({ fill: "#f00" })
.attr({ r: 0 });
})
.remove();
// ENTER
node.enter().append("g").classed("node", true)
.attr({
transform: function(d) { return "translate(" + [d.x, d.y] + ")"; }
})
.append("circle")
.style({ fill: "#0f0", "stroke": "#333" })
.attr({ r: 0 })
.transition().duration(1000)
.attr({ r: 10 })
.style({ fill: "#ddd" });
// TODO: Grow radius on enter
// UPDATE + ENTER
// ....
}
update();
window.setInterval(switchData, 2000);
function switchData() {
hierarchy = (hierarchy == hierarchyA) ? hierarchyB : hierarchyA;
update();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment