Question

我是编程的新手，如果对此的回答很明显，但是经过几个小时的搜索，我就无法找到错误。

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

非常感谢

以下摘录

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' explanation here。这将阻止你获得＆＃34;对象[对象全局]没有方法＆＃39; getAttribute＆＃39;＆＃34;控制台中的错误

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

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

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

D3弧补间不起作用

1 个答案: