0

我已经研究 d3.js 一个多星期了，但我被困在一件事上。我根据这个创建了一个甜甜圈图：

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

这个圆环图有一个使用“arcTween”更新图表的更新函数：

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

}

在这个“arcTween”函数中，它使用了弧函数。因为它被用于 1 个甜甜圈图，所以它被全球宣布。因为我在页面上使用了多个图表。我想知道这样做的方法是什么。我已经尝试在数组中创建这个“弧”，但它不知何故不起作用。

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

4

1 回答 1

0

这是咖啡脚本中的 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)
于 2013-05-12T16:00:55.467 回答