Click on any package to zoom in or out. See also this static circle packing example.
forked from mbostock's block: Zoomable Circle Packing
forked from john-guerra's block: Modularized Zoomable Circle Packing
xxxxxxxxxx
<meta charset="utf-8">
<style>
.node {
cursor: pointer;
}
.node:hover {
stroke: #000;
stroke-width: 1.5px;
}
.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;
}
</style>
<h1>One</h1>
<svg id="chart1" width="100" height="100"></svg>
<h2>Two</h2>
<svg id="chart2" width="300" height="300"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="ZoomableCirclePacking.js"> </script>
<script>
var zcp = ZoomableCirclePacking("#chart1");
var zcp2 = ZoomableCirclePacking("#chart2");
d3.json("flare.json", function (err, data) {
if (err) throw err;
zcp.update(data);
zcp2.update(data);
});
</script>
https://d3js.org/d3.v4.min.js