0

私はd3を初めて使用し、今のところ気に入っていますが、何かをまとめようとしていて、特定の動作を修正する方法がわかりません。

これが私がやろうとしていることのデモです：

[削除]デッドリンク

最初の動作は、各ゲージの「開始」ポイントが常にデフォルトで黒に戻り、そこから色が遷移することです。

2番目の動作は、回転間の遷移が「バウンス」することです。これは、（150,150）を中心に回転しておらず、代わりに（0,0）を中心に回転しているため、トランジションで「バウンス」しますが、これを修正する方法がわかりません。

誰かが私がどこで間違っているのかを知るのを手伝ってくれませんか？

ありがとう。

4

2 に答える 2

1

どちらの動作も、再描画のたびにゲージの現在の状態をリセットしている結果です。行を取り出してみてください：

pointer
  .attr("transform", null)
  .style("fill", null);

変換するとゲージが原点に戻り、塗りつぶしによってゲージが黒に戻ります。

于 2012-11-12T19:17:18.683 に答える
0

この関数はバウンスを修正します。バウンスを取り除くために補間関数が必要でした。aは前の位置です。

pointer.transition()
        .style("fill", this.valueToColor(value))
        .duration(1000)
        .ease("bounce")
        .attrTween("transform", tween);

    function tween(d, i, a) {
      return d3.interpolateString(a, "rotate(" + rotateAngle + ", 150, 150)");
    }
于 2012-11-12T20:50:15.657 に答える