xxxxxxxxxx<head> <title>d3 Unconf 2017!</title> <script src='https://d3js.org/d3.v4.min.js'></script></head><body> <svg></svg></body><script> var vWidth = 1045; var vHeight = 1550; var vMargin = 2; var vRadius = Math.min(vWidth, vHeight) / 2 - vMargin; var vColor = d3.schemeCategory20b[13]; //vColor = d3.schemeCategory20b[ Math.random() * 20 | 0]; var vData = { 'id': 'TOPICS', 'children': [{ 'id': 'Topic A', 'children': [{'id': 'Sub A1', 'size': 4}, {'id': 'Sub A2', 'size': 4}] }, { 'id': 'Topic B', 'children': [{'id': 'Sub B1', 'size': 3}, {'id': 'Sub B2', 'size': 3}, {'id': 'Sub B3', 'size': 3}] }, { 'id': 'Topic C', 'children': [{'id': 'Sub C1', 'size': 4}, {'id': 'Sub C2', 'size': 4}] }]}; // Prepare our physical space var g = d3.select('svg') .attr('width', vWidth) .attr('height', vHeight) .append('g') .attr('transform', 'translate(' + vWidth / 2 + ',' + vHeight / 2 + ')'); // d3 layout var partitionLayout = d3.partition() .size([2 * Math.PI, vRadius]); // Find data root var root = d3.hierarchy(vData) .sum(function (d) { return d.size }); // Size arcs partitionLayout(root); var arc = d3.arc() .startAngle(function (d) { return d.x0; }) .endAngle(function (d) { return d.x1; }) .innerRadius(function (d) { return d.y0; }) .outerRadius(function (d) { return d.y1; }); // Put it all together var vPath = g.selectAll('path') .data(root.descendants()) .enter().append('path') .attr('display', function (d) { return d.depth ? null : 'none'; }) .attr('d', arc) .style('stroke', '#000') .style('fill', '#fff'); animate(); d3.transition().delay(2800).on('end', animate); d3.transition().delay(5600).on('end', animate); d3.transition().delay(8400).on('end', animate); d3.transition().delay(11800).on('end', animate); function animate() { vPath.each(function (d, i) { d3.select(this).transition().delay(i * 50).duration(i * 200) .style('fill', vColor) .transition().duration(1000) .style('fill', '#fff'); }); } //animate().addEventListener("ended", animate); //vColor = d3.schemeCategory20b[13]; //animate();</script> https://d3js.org/d3.v4.min.js