Click anywhere to zoom in, or click on the top bar to zoom out.
Converting Bostock's classic to d3 v4. You may find the diff helpful in understanding the d3-hierarchy api changes! Note that I didn't touch the json.
forked from tophtucker's block: Zoomable Icicle (d3 v4)
xxxxxxxxxx
<meta charset="utf-8">
<style>
rect {
stroke: #fff;
}
</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var width = 960,
height = 500;
var x = d3.scaleLinear()
.range([0, width]);
var y = d3.scaleLinear()
.range([0, height]);
var color = d3.scaleOrdinal(d3.schemeCategory20c);
var partition = d3.partition()
.size([width, height])
.padding(0)
.round(true);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var rect = svg.selectAll("rect");
d3.json("readme.json", function(error, root) {
if (error) throw error;
console.log(root);
root = d3.hierarchy(d3.entries(root)[0], function(d) {
return d3.entries(d.value)
})
.sum(function(d) { return d.value })
.sort(function(a, b) { return b.value - a.value; });
console.log(root.descendants())
partition(root);
rect = rect
.data(root.descendants())
.enter().append("rect")
.attr("x", function(d) { return d.x0; })
.attr("y", function(d) { return d.y0; })
.attr("width", function(d) { return d.x1 - d.x0; })
.attr("height", function(d) { return d.y1 - d.y0; })
.attr("fill", function(d) { return color((d.children ? d : d.parent).data.key); })
.on("click", clicked);
});
function clicked(d) {
x.domain([d.x0, d.x1]);
y.domain([d.y0, height]).range([d.depth ? 20 : 0, height]);
rect.transition()
.duration(750)
.attr("x", function(d) { return x(d.x0); })
.attr("y", function(d) { return y(d.y0); })
.attr("width", function(d) { return x(d.x1) - x(d.x0); })
.attr("height", function(d) { return y(d.y1) - y(d.y0); });
}
</script>
https://d3js.org/d3.v4.min.js