Explanation of D3 clickable "pack" layout.
click to see official example. "elements" in this article means HTML elements.
<![CDATA[<head>
<style>
.node {
cursor: pointer;
}
/*CSS selector ".node:hover" means select elements with "class=node" when mouse is over the element. */
.node:hover {
stroke: #000;
stroke-width: 1.5px;
}
/*CSS selector ".node--leaf" means select elements with "class=node--leaf". "node--leaf" is a class name. */
.node--leaf {
fill: white;
}
.label {
font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-anchor: middle;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
.label,
.node--root,
.node--leaf {
pointer-events: none; /*no mouse event response on elements with these classes*/
}
</style>
</head>
<body>
<script>
var margin = 20,
diameter = 960;
/*define the color. d3.scale transforms the input from .domain to .range using .interpolate. In this example, it means the input to the function "color" will be in [-1,5] and the output will be in ["hsl(152,80%,80%)", "hsl(228,30%,40%)"]. Basically, it is a mapping from [-1,5] to ["hsl(152,80%,80%)", "hsl(228,30%,40%)"]. How to compute which value in [-1,5] corresponds to which value in ["hsl(152,80%,80%)", "hsl(228,30%,40%)"]? We use interpolate "d3.interpolateHcl".*/
var color = d3.scale.linear()
.domain([-1, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);
/*Here is how we use pack layout. We define a size of the entire pack and a value for each of its elements.*/
var pack = d3.layout.pack()
.padding(2)
.size([diameter - margin, diameter - margin])
.value(function(d) { return d.size; }) /*d.size is defined in the given dataset in file "flare.json". Just a heads up, if you do not return anything, the default return value is 0.*/
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
d3.json("flare.json", function(error, root) {
if (error) throw error;
var focus = root,
nodes = pack.nodes(root), /*"nodes" is an array of objects which are extracted from Json file.*/
view;
var circle = svg.selectAll("circle")
.data(nodes) /*each element of circle is associate with an object stored in "nodes".*/
.enter().append("circle")
/*determine the classes for different HTML elements. "node node--leaf" means that the html element with two attributes "class=node" and "class=node--leaf" which further means the CSS styles defined for ".node" and ".node--leaf" will be applied to this element. However, in this example, "node" is not needed for "node--leaf" and "node--root". There will be no differences if we write like this:
.attr("class", function(d) { return d.parent ? d.children ? "node" : "node--leaf" : "node--root"; }) */
.attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
.style("fill", function(d) { return d.children ? color(d.depth) : null; }) /*d.depth is level of the node in hierarchy. automatically computed.*/
.on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); }); /*when we click a node and it is different from previous clicked node, we "zoom" to that node. d3.event.stopPropagation() stops the click event propagated to its parent node. what does this mean? Suppose you have two circles A and A_sub. A_sub is inside A. If you click A_sub, it will trigger the actions for A_sub first and then the actions for A. If you have d3.event.stopPropagation() put in A_sub's actions, then you click A_sub, only A_sub's actions will be triggered. See an example here: http://bl.ocks.org/jasondavies/3186840*/
var text = svg.selectAll("text") /*select all elements with tag name "text"*/
.data(nodes)
.enter().append("text")
.attr("class", "label") /*define a class "label" for tag "text"*/
.style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; }) /*Opacity can be used if you want to create transparency or fade effect. without this line, you won't see the fade effect.*/
.style("display", function(d) { return d.parent === root ? null : "none"; }) /*display the elements when they are the children of root module.*/
.text(function(d) { return d.name; });
var node = svg.selectAll("circle,text"); /*all elements with "class="circle" and "class="text" are selected.*/
d3.select("body")
.style("background", color(-1)) /*the parameter of color is in [-1,5]*/
.on("click", function() { zoom(root); }); /*if you click the background, it will zoom to root.*/
zoomTo([root.x, root.y, root.r * 2 + margin]); /*initial display of the entire data from json file.*/
function zoom(d) {
var focus0 = focus; focus = d;/*update the current focus. focus0 is not used.*/
/*simply put, d3.transition performs the transition procedure from one point to another point. During these two points, there are many "frames" (think it as film frame). ".tween" is used to control how to display each frame. The tween function is called repeatedly, being passed the current normalized time t in [0, 1].*/
var transition = d3.transition()
.duration(d3.event.altKey ? 7500 : 750) /*specify the length of the transition.*/
.tween("zoom", function(d) {
var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]); /*compute each frame between "view" and "focus", where "view" is a global variable and set in function "zoomto".*/
return function(t) { zoomTo(i(t)); }; /*"i" is a function, t is passed to the 2nd parameter of tween function. i(t) is the view of frame.*/
});
transition.selectAll("text")
.filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
.style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; }) /*fade effect*/
.each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; }) /*beginning of frame.*/
.each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; }); /*end of frame.*/
}
function zoomTo(v) {
/*room from current "view" to "v" which is computed by d3.interpolateZoom.*/
var k = diameter / v[2]; view = v; /*v[2] is the new radius of the clicked circle.*/
node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
circle.attr("r", function(d) { return d.r * k; }); /*update the circle size*/
/*note, all nodes ("circle" and "text" on Line 66) will be updated.*/
}
});
d3.select(self.frameElement).style("height", diameter + "px");
</script>
</body>]]>
