0

すでに 1 週​​間以上 d3.js を調査していますが、1 つのことに行き詰まりました。これに従って、ドーナツチャートを作成しました：

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

このドーナツ チャートには、「arcTween」を使用してチャートを更新する updae 関数があります。

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

これがCoffee-scriptのLarsのコメント
です

# 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 に答える