Sunburst example updated to v4?

279 views
Skip to first unread message

Paul LeFevre

unread,
Aug 4, 2016, 4:03:55 PM8/4/16
to d3-js
I took Mike's original zoomable sunburst example (http://bl.ocks.org/mbostock/4348373), and modified it to use arbitrary data under d3 v3. 
It was working great.
Last week I made the decision to upgrade my system (over 50 chart types) to d3 v4.
I've made all the changes and have everything working *except* sunburst charts.
There are enough changes to partition and hierarchy that I'm stuck.

Has anyone updated the sunburst examples (and by anyone, I mainly mean Mike...) to d3 v4?
Here's a short code bit that's not working:

var x = pd3.scaleLinear()
.range([0, 2 * Math.PI]);
var y = pd3.scaleSqrt()
.range([0, radius]);
var color = pd3.scaleOrdinal(pd3.schemeCategory20);
var partition = pd3.partition();
var arc = pd3.arc()
.startAngle(function(d) { return Math.max(0,Math.min(2 * Math.PI, x(d.x0))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x1))); })
.innerRadius(function(d) { return Math.max(0, y(d.y0)); })
.outerRadius(function(d) { return Math.max(0, y(d.y1)); });
var xfmsvg = psvg.append("g")
.attr("transform", "translate(" + (width/2) + "," + (height/2) + ")");  // basic transform away from margins
var jsroot = buildSunburstHierarchy(data.resultSet.rows, "c_1", "m_1");
var root = pd3.hierarchy(jsroot)
.sum(function(d) { return 1;});
var ptdata = partition(root);
xfmsvg.selectAll("path")
.data(ptdata)
.enter().append("path")
.attr("d", function(d) {
var acdata = arc(d);
return acdata; })
.style("fill", function(d) { return color((d.children ? d : d.parent).name); });

my ptdata variable is partitioned as I think it should be.  The arc function in the last section appending paths never gets called though.
Thanks for any help.

Paul LeFevre

unread,
Aug 5, 2016, 10:26:49 AM8/5/16
to d3-js
Solved my own problem (but Mike, if you're reading this, a v4 update for the sunburst would still be a good idea!).

The.data line for the append("path") section should be the descendants() of the root partition, not the root partition itself.
So .data(ptdata) turns into .data(ptdata.descendants()), and we're off and drawing.
In case anyone else runs into this.
 

tre...@twitter.com

unread,
Aug 18, 2016, 10:00:33 PM8/18/16
to d3-js
hi paul!  you willing by chance to post your fix.  i've got the same thing going on. :)

  -trebor
Reply all
Reply to author
Forward
0 new messages