Question

我正在尝试用d3.js创建一个动画弧段。我得到了弧和转换工作，但是当动画运行时，弧变得扭曲，我无法弄清楚原因。

这是我到目前为止所拥有的：

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路径字符串和新计算的字符串之间进行插值 - 这将做一些奇怪的事情 - 而不是在前一个角度和新角度之间插值，这是什么你想要的。

您需要使用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/

d3.js弧段动画问题

1 个答案: