D3弧补间不起作用

Question

我是编程的新手如此道歉，如果答案很明显，但经过几个小时的搜索，我无法找出问题所在。

我只想补间D3.js中的弧（在这种情况下，将endAngle更改为0）。 我经历了很多例子但我必须遗漏一些东西。 我已经构建了一个函数来改变点击时的弧颜色，但它是第二个函数'arcTween'来改变不起作用的最外面弧的弧端角度。 你能帮我吗？

非常感谢

完整的JS小提琴： http ： //jsfiddle.net/vaaa052h/

以下摘录

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

我在这个更新的小提琴中做了几处改动： http ： //jsfiddle.net/henbox/a8r326m5/1/

首先，当您设置单击处理程序时，请避免使用以下命令在页面加载时调用它：

.on("click", arcTween);

代替

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

按照Lars的解释 。 这将阻止您在控制台中获得“对象[对象全局]没有方法'getAttribute'”错误

其次，将一些数据绑定到路径元素，以便我们以后可以操作它：

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

第三，在arcTween函数中使用此数据。 通过设置maxAngArc和minAngArc ，然后将maxAngArc的值补maxAngArc到minAngArc （我认为你的意思是这样做而不是补间为0 ），你应该得到你想要的行为。 补间功能：

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