Question

我已经研究了d3.js超过一周了，我就陷入了困境。我根据这个创建了一个圆环图：

http://jsfiddle.net/MX7JC/9/

这个圆环图有一个updae函数，它使用“arcTween”来更新图表：

function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) {
    return arc(i(t));
};

}

在这个“arcTween”函数中，它使用了弧函数。因为它有1个圆环图，它是全球宣布的。因为我在页面上使用了多个图表。我想知道这样做的方法是什么。我已经尝试在数组中创建这个“弧”，但它在某种程度上不起作用。

如果有其他方法可以实现这一点，我很乐意知道。

Answer 1

以下是咖啡脚本中的Lars评论 getTween返回具有唯一弧的补间函数

# Arc function
arc = (r) -> 
  return d3.svg.arc().innerRadius(r*0.8).outerRadius(r)

# Closure for tween
getTween = (arc) ->
  tween  = (b) ->
    previous = if @previous? then @previous else 0
    i = d3.interpolate {amount: previous}, b
    @previous = b.data.amount
    return (t) -> arc i(t)

# Get tween function
tween = getTween arc(60)

# ENTER
pie.enter().append("svg:path")
   .attr("fill", core.getColor())
.transition()
   .ease("elastic")
   .duration(750)
   .attrTween("d",tween)

如何在d3.js中更新多个图表？

1 个答案: