D3弧补间不起作用

Question

I am new to programming so apologies if the answer to this is obvious but after hours of searching I can't find out what's wrong.

I simply want to tween an arc in D3.js (in this case change the endAngle to 0). I've been through lots of examples but I must be missing something. I have built a function to change arc colour on clicking which works but it is the second function 'arcTween' to change the arc endAngle of the outermost arcs that doesn't work. Can you help?

Many thanks

Full JS fiddle here: http://jsfiddle.net/vaaa052h/

Extracts below

var chartArea = d3.select("#chart")
    .append("svg") //  d3 SVG function
.attr("width", 210)
    .attr("height", 210);


var arcGroup = chartArea.append("g") //  d3 g grouping function
.attr("transform", "translate(" + transX + "," + transY + ")")
    .attr("class", "arc");


var arc = d3.svg.arc()
    .innerRadius(function (d) {
    return radius[level];
})
    .outerRadius(function (d) {
    return radius[level + 1];
})
    .startAngle(function (d) {
    return minAngArc;
})
    .endAngle(function (d) {
    return maxAngArc;
});


////////  chart building ///////////////


arcGroup.append("path")
    .attr("d", arc)
    .attr("fill", color(0, random, 0, i, j, k))
    .attr("opacity", opacity(rating))
    .on("click", arcTween());

////// click functions   //////////

function arcTween(d) {
    d3.select(this).transition().duration(1000)
        .attrTween("d", function (d) {
        var interpolate = d3.interpolate(d.endAngle, 0);
        return function (t) {
            d.endAngle = interpolate(t);
            return arc(d);
        };
    });
};

Answer 1

I made a couple of changes in this updated fiddle: http://jsfiddle.net/henbox/a8r326m5/1/

First, when you set up the click handler, avoid calling it on page load by using:

.on("click", arcTween);

instead of

.on("click", arcTween());

as per Lars' explanation here . This will stop you getting "Object [object global] has no method 'getAttribute'" errors in the console

Second, bind some data to the path elements so we can manipulate it later:

arcGroup.append("path")
    .datum({endAngle:maxAngArc, startAngle:minAngArc})
    ....

And thirdly, use this data in the arcTween function. By setting maxAngArc and minAngArc , and then tweening the value of maxAngArc to minAngArc (I've asumed you mean to do this rather than tweening to 0 ), you should get the behaviour you want. The tween function:

function arcTween(d) {
    maxAngArc = d.endAngle;
    minAngArc = d.startAngle;
    d3.select(this).transition().duration(1000)
        .attrTween("d", function (d) {
        var interpolate = d3.interpolate(d.endAngle, d.startAngle);
        return function (t) {
            maxAngArc =  interpolate(t);
            return arc(d);
        };
    });
};