title: D3 V4 Sunburst diagram layout arc calculation
body: <p>This is the code to compute the coordinates of the sunburst nodes:</p>
  
  <pre><code>var arc = d3.svg.arc()
      .startAngle(function(d) { return d.x; })
      .endAngle(function(d) { return d.x + d.dx; })
      .innerRadius(function(d) { return Math.sqrt(d.y); })
      .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
  </code></pre>
  
  <p>Where:</p>
  
  <p>x: the minimum x-coordinate of the node position </p>
  
  <p>y: the minimum y-coordinate of the node position </p>
  
  <p>dx: the x-extent of the node position </p>
  
  <p>dy: the y-extent of the node position</p>
  
  <hr>
  
  <p>However, in the recently realeased version v4, the space-filling layouts d3.treemap and d3.partition now output x0, x1, y0, y1 on each node instead of x0, dx, y0, dy</p>
  
  <p>node.x0 - the left edge of the rectangle</p>
  
  <p>node.y0 - the top edge of the rectangle</p>
  
  <p>node.x1 - the right edge of the rectangle</p>
  
  <p>node.y1 - the bottom edge of the rectangle</p>
  
  <p>What would be the correspinding code for v4 as the following does not produce the correct layout?</p>
  
  <pre><code>var arc = d3.arc()
      .startAngle(function(d) { return d.x0; })
      .endAngle(function(d) { return d.x0 + (d.x1 - d.x0); })
      .innerRadius(function(d) { return d.y0; })
      .outerRadius(function(d) { return d.y0 + (d.y1 - d.y0); });
  </code></pre>
  
  <p>See <a href="http://codepen.io/BuildingJarl/pen/GqEwyo" rel="nofollow">codepen</a></p>