D3 sunburst diagram: Setting arc.cornerRadius() causes invalid path with arcTween

Question

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.

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.

Correct path:

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

Error path:

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

This is how i set the radius:

    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;});

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:

    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 <path> 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

This is my arcTween function (EDITED in correspondance to mbostok on github issue):

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); };
        };
    }

Any ideas please, what can i check next?

p.s. sry, no jsfiddle because they have currently not the d3 v3.5 installed (i'm missing a data import). My code ressembles the example here: zoomable sunburst

Here is a screenshot of the breakpoint in the d3.js lib where the error occurs, but i still have no idea:

Answer 1

Bear in mind that cornerRadius is relatively new feature of D3 partition layout, so there may still be some bugs related to it.

However, my impression is that your problem is not there.

Based on the example that you linked to, I created a small codepen.

It is the same as the example, just it uses smalled data set, and keeps data in the script itself, instead in JSON file.

Also, I integrated cornerRadius, checked for variety of values - and everything works like charm, as seen in the pics below.

I couldn't integrate your tween function, since some bits and peaces are missing from the rest of the code.

So, it looks you need to check and rewrite your code, especially anything related to arcTween().

Screenshots illustrating valid execution in my example:

cornerRadius is 5:

cornerRadius is 20:

cornerRadius is 100: