missing segments in d3 when putting sunburst on top of pie

Question

(first posted on google group but no response so assuming I should be posting this here).

Am trying to lay a sunburst (coloured arcs) on top of a pie (yellow and white segments).

Here is a js fiddle that shows the problem, the initial green segments are missing:

http://jsfiddle.net/qyCkB/1/:

and a js fiddle without the pie where all the segments are shown correctly:

http://jsfiddle.net/X3sRy/1/

I have checked the nodes variable after it has been created on this line:

  var nodes = partition.nodes({'values': data});

and the values appear to be the same in both examples.

On checking the DOM, it is just not drawing the first few segments of the sunburst.

Should this work or is it not possible to put two different layouts on top of each other? Is there a better approach to achieving the same thing?

Answer 1

Your second-data join is colliding with the first. Your first data-join is on "g.arc", so you should be adding G elements with the class "arc" (not "clock_arc"). Your second data-join is on "path", which is inadvertently selecting the path elements you added previously. Since your second data-join matches the previously-added elements, you're not entering all of the expected elements for the pie.

You need to disambiguate the sunburst path elements from the pie path elements. One way you could do this is to select by class rather than element type, so the second data-join becomes ".pie" rather than "path". Something like this:

var gClock = svg.selectAll(".clock")
    .data(clockData)
  .enter().append("g")
    .attr("class", "clock");

var pathClock = gClock.append("path");

var pathPie = svg.selectAll(".pie")
    .data(pieData)
  .enter().append("path")
    .attr("class", "pie");

I'd also recommend reading these tutorials, if you haven't already: Thinking with Joins, Nested Selections, Object Constancy.