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