javascript - d3.js 圆弧段动画问题

Question

我正在尝试使用 d3.js 创建动画弧段。我得到了弧线和过渡效果，但在动画运行时，弧线变形了，我不明白为什么。

这是我目前所拥有的:

jsfiddle

var dataset = {
    apples: [532, 284]
};

var degree = Math.PI/180;

var width = 460,
    height = 300,
    radius = Math.min(width, height) / 2;

var color = d3.scale.category20();

var pie = d3.layout.pie().startAngle(-90*degree).endAngle(90*degree)
    .sort(null);

var arc = d3.svg.arc()
    .innerRadius(radius - 100)
    .outerRadius(radius - 50);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = svg.selectAll("path")
    .data(pie(dataset.apples))
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);   


window.setInterval(dummyData, 2000);

function dummyData(){
    var num = Math.round(Math.random() * 100);
    var key = Math.floor(Math.random() * dataset.apples.length);

    dataset.apples[key] = num;

    draw();
};

function draw(){     
    svg.selectAll("path")
        .data(pie(dataset.apples))
    .transition()
    .duration(2500)
        .attr("fill", function(d, i) { return color(i); })
        .attr("d", arc);   
}

Answer 1

正如 Richard 所解释的，您是在先前计算的 SVG 路径字符串和新计算的字符串之间进行插值——这会做一些奇怪的事情——而不是在先前的 Angular 和新的 Angular 之间进行插值，这就是你想要的。

您需要对输入进行插值，并使用 arc 函数将每个插值映射到 SVG 路径字符串。为此，您需要将每个先前的数据存储在某处并使用自定义补间函数，您可以在我之前评论的示例中找到该函数。

1.记住以前的数据(最初):

.each(function(d) { this._current = d; });

2。定义自定义补间函数:

function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0); // Remember previous datum for next time
  return function(t) {
    return arc(i(t));
  };
}

3。使用它:

.attrTween("d", arcTween)

它是这样的:http://jsfiddle.net/Qh9X5/18/