Javascript 在基于对象的d3.svg.arc图之间绘制（无需重新绘制）。

我的Tween函数（如下）无法正常工作。控制台显示圆弧的endAngle属性的正确步骤。但是HTML检查器显示一些NaN和null值，而不是正确的arc值

function tweenEndAngle() {
  return function () {
    var startAngle = d3.select(this).attr("start");
    var endAngle = d3.select(this).attr("end");
    var inner = d3.select(this).attr("inner");
    var outer = d3.select(this).attr("outer");
    //alert("start:" +startAngle+", end:"+endAngle);
    var i = d3.interpolateNumber(endAngle, startAngle);
    return function (t) {
        console.log(i(t));
        //the concole shows the correct steps but the arc is not drawn correctly
        d3.select(this).attr("d", d3.svg.arc()
                             .startAngle(function(){return startAngle;})
                             .endAngle(function(){return i(t);})
                             .innerRadius(function(){return inner;})
                             .outerRadius(function(){return outer;})
                            );
    }
  }
}

正确的行为应该是：鼠标悬停在每个弧上时，应收缩到其星形缠结处

这是小提琴：

请给我指一下正确的方向

谢谢大家!

我发现了两个问题：

在设置内部和外部属性的行上，返回值不能与返回值在单独的行上-这就是为什么内部和外部属性为null

您需要在tweening函数中将值转换为数字：

var startAngle = parseFloat(d3.select(this).attr("start"));
var endAngle = parseFloat(d3.select(this).attr("end"));
var inner = parseFloat(d3.select(this).attr("inner"));
var outer = parseFloat(d3.select(this).attr("outer"));

工作小提琴：

---

从这样的工作示例开始可能更容易。谢谢。完美答案。