svg 上的圆圈无法使用 D3 javascript 库正确补间

Question

我目前正在使用 D3 库创建圆环图。当按下按钮时，图表有两种状态，您可以在两种状态之间进行补间。按下按钮时，饼图切片、折线和文本标签都正确地围绕图表补间。但是，当我按下按钮时，我的某些圆圈无法正确补间。圆圈保留在原位，但会在变换的结束位置绘制新圆圈。

我有一个 jsfiddle 显示了这里的行为：http://jsfiddle.net/Qh9X5/7847/

控制圆圈的相关代码具体在这里：

        /* ------- OUTER POINTS -------*/


        var outerPoint = fndAfter.select(".outerPoints").selectAll(".outerPoint")
           .data(pie(data), key);

        outerPoint.enter()
            .append("circle")
            .attr("r", "2");

        outerPoint.transition().duration(1000)
            .attrTween("transform", function (d) {
                this._current = this._current || d;
                var interpolate = d3.interpolate(this._current, d);
                this._current = interpolate(0);
                return function (t) {

                    var d2 = interpolate(t);
                    var pos = outerArc.centroid(d2);
                    pos[0] = radius * 0.624 * (midAngle(d2) < Math.PI ? 1 : -1);
                    return "translate(" + pos + ")";
                };
            });

        outerPoint.exit()
            .remove();

        /* ------- INNER POINTS -------*/

        var innerPoint = fndAfter.select(".innerPoints").selectAll(".innerPoint")
           .data(pie(data), key);

        innerPoint.enter()
            .append("circle")
            .attr("r", "2");

        innerPoint.transition().duration(1000)
            .attrTween("transform", function (d) {
                this._current = this._current || d;
                var interpolate = d3.interpolate(this._current, d);
                this._current = interpolate(0);
                return function (t) {
                    var d2 = interpolate(t);
                    var pos = outerArc.centroid(d2);
                    pos[0] = radius * 0.624 * (midAngle(d2) < Math.PI ? 1 : -1);
                    return "translate(" + midPoint(midPoint(arc.centroid(d2), outerArc.centroid(d2)), outerArc.centroid(d2)) + ")";
                };
            });

        innerPoint.exit()
            .remove();

我的印象是 attrTween 应该对所有转换函数都一样工作，无论它是什么元素。

Answer 1

问题不在于 attrTween。您使用 selectAll('.innerPoint') 来定义您的选择，但您从未将 innerPoint class 应用于圆圈，因此 d3 永远不会找到任何匹配的选择并每次都附加新的圆圈。

工作fiddle：http://jsfiddle.net/Qh9X5/7849/

svg 上的圆圈无法使用 D3 javascript 库正确补间

Circles on svg wont tween correctly using D3 javascript library

javascript

d3.js

svg

tween