title: D3 sunburst diagram: Setting arc.cornerRadius() causes invalid path with arcTween
body: <p>I try to create a dynamic sunburst chart, which zooms the selected arc and hides the other arcs. This works pretty well, as long as i avoid to use arc.cornerRadius() with a value greater than 0.</p>
  
  <p>I logged the generated arc in the (attrTween) arcTween function and the output seems correct to me, but following svg paths differ, where the second one causes an error in the d3.min.js:5.</p>
  
  <p>Correct path:</p>
  
  <pre><code>M0,58.528989440000004A58.528989440000004,58.528989440000004 0 1,1 0,-58.528989440000004A58.528989440000004,58.528989440000004 0 1,1 0,58.528989440000004M0,55A55,55 0 1,0 0,-55A55,55 0 1,0 0,55Z
  </code></pre>
  
  <p>Error path:</p>
  
  <pre><code>M0,55.73917966222222A55.73917966222222,55.73917966222222 0 1,1 0,-55.73917966222222A55.73917966222222,55.73917966222222 0 1,1 0,55.73917966222222M0,55A55,55 0 1,0 0,-55A55,55 0 1,0 0,55Z
  </code></pre>
  
  <p>This is how i set the radius:</p>
  
  <pre><code>    var graphMaxRadius = 83;
      var innerBtnRadius = 55;
      var arc = d3.svg.arc()
                  .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, xScale(d.x))); })
                  .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, xScale(d.x + d.dx))); })
                  .innerRadius(function(d) { return Math.max(innerBtnRadius, yScale(d.y)); })
                  .outerRadius(function(d) { return Math.max(0, Math.min(yScale(d.y + d.dy), graphMaxRadius)); })
                  .cornerRadius(function(d) { return 10;});
  </code></pre>
  
  <p>My first guess was, that the cornerRadius conflicts the hiding arcs and the invalid svg happens, so i tried various sizes. But everything > 0 causes the error with an output of:</p>
  
  <pre><code>    M0,55A55,55 0 1,1 0,-55A55,55 0 1,1 0,55M0,50.006635519999996A50.006635519999996,50.006635519999996 0 1,0 0,-50.006635519999996A50.006635519999996,50.006635519999996 0 1,0 0,50.006635519999996Z
      d3.min.js:5 Error: Invalid value for &lt;path&gt; attribute d="MNaN,NaNANaN,NaN 0 1,1 NaN,NaNLNaN,NaNANaN,NaN 0 0,1 NaN,NaNZ"
  d3.min.js:5 (anonymous function)
  d3.min.js:3 l
  d3.min.js:1 Lt
  d3.min.js:1 qt
  </code></pre>
  
  <p>This is my arcTween function (EDITED in correspondance to mbostok on <a href="https://github.com/mbostock/d3/issues/2183" rel="nofollow noreferrer">github issue</a>):</p>
  
  <pre><code>return function arcTween(d) {
          var xd = d3.interpolate(xScale.domain(), [d.x, d.x + d.dx]);
          var yd = d3.interpolate(yScale.domain(), [d.y, d.y + d.dy]);
  
          var selectionRadius = innerBtnRadius - 5;
          //radius -5 reduces width of inner circle and selection rim
          var yr = d3.interpolate(yScale.range(), [d.y ? selectionRadius : innerBtnRadius, radius-5]);
  
          return function(d, i) {
              return i
                  ? function(t) { return arc(d); }
                  : function(t) { xScale.domain(xd(t)); yScale.domain(yd(t)).range(yr(t)); return arc(d); };
          };
      }
  </code></pre>
  
  <p>Any ideas please, what can i check next?</p>
  
  <p>p.s. <strike>sry, no jsfiddle because they have currently not the d3 v3.5 installed</strike> (i'm missing a data import). My code ressembles the example here: <a href="http://bl.ocks.org/mbostock/4348373" rel="nofollow noreferrer">zoomable sunburst</a></p>
  
  <p>Here is a screenshot of the breakpoint in the d3.js lib where the error occurs, but i still have no idea:</p>
  
  <p><img src="https://i.stack.imgur.com/mluQ0.png" alt="This is where the error occurs in the d3.js"></p>