xxxxxxxxxx
<head>
<meta charset="utf-8">
<style type="text/css">
body {
font-family: 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
}
rect {
pointer-events: all;
}
circle {
stroke: #ddd;
fill: #eee;
}
circle.parent {
fill-opacity: 0;
}
text {
text-anchor: middle;
font-size: 11px;
font-weight: 300;
}
</style>
</head>
<body>
<div id="chart"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var margin = 10,
outerDiameter = 500,
innerDiameter = outerDiameter - margin - margin;
index = 1;
var x = d3.scale.linear()
.domain([0,innerDiameter])
.range([0, innerDiameter]);
var y = d3.scale.linear()
.domain([0,innerDiameter])
.range([innerDiameter,0]);
var zoom = d3.behavior.zoom()
.x(x)
.y(y)
var pack = d3.layout.pack()
.size([960, innerDiameter])
.padding(2)
.sort(null)
.value(function(d){ return d.size; });
var svg = d3.select('#chart')
.append("svg")
.attr("width", 960)
.attr("height", outerDiameter)
.append("g")
.attr("transform", "translate(" + margin + "," + margin + ")")
.call(zoom)
svg.append('rect')
.attr("width", 960)
.attr("height", outerDiameter)
.attr("fill","none");
d3.json("flare.json", function(error, data) {
indexing(data,index);
var nodes = pack.nodes(data);
zoom.scaleExtent([1, d3.max(nodes, function(d){ return d.index; })-1])
.on('zoom', update)
function update() {
index = Math.floor(zoom.scale());
var parent = svg.selectAll("circle.parent")
.data(nodes.filter(function(d){ return d.index == index; }))
parent
.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); })
.attr("r",function(d){ return d.r * zoom.scale()})
parent.enter().append("circle")
.attr("class", 'parent')
.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); })
.attr("r",function(d){ return d.r * zoom.scale(); })
parent.exit().remove();
var child = svg.selectAll("circle.child")
.data(nodes.filter(function(d){ return d.index == index + 1; }))
child
.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); })
.attr("r",function(d){ return d.r * zoom.scale() })
child.enter().append("circle")
.attr("class", 'child')
.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); })
.attr("r",function(d){ return d.r * zoom.scale(); })
child.exit().remove();
svg.selectAll("text").remove();
svg.selectAll("text")
.data(nodes.filter(function(d){ return d.index == index + 1; }))
.enter().append('text')
.text(function(d){ return d.name; })
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y); })
}
update();
// Adding an index for each nested level
function indexing(d,i){
d.index = i;
if (!d.children) return;
d.children.forEach(function(child){ indexing(child, i+1); })
}
})
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js