0

D3.js を使用してドーナツ グラフの視覚化に取り組んでいます。ディレクティブを作成myWheelし、リンク関数で要素$watchの属性を変更valしました<my-wheel>。

データが更新されるたびに、ビジュアライゼーションはトランジションで更新され、正常に動作しますが、最初のトランジションは無視されます。このプランカーを参照してください。

$timeoutデータの最初の更新を( だけ) 遅らせると、遷移がトリガーされます。

問題がどこにあるかのアイデアはありますか?

4

1 に答える 1

1

パスが作成されたときにデータムに設定さselection.eachれた の入力選択を呼び出す必要があります。これは、最初に入るまでに、同じ値であることを意味します。したがって、補間器は最初は何もしません。donutDataSlicethis._currentarcDataTweenthis._currenta

他にもいくつかの問題があります。arcDataTweenあなたにはこれがあります：

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

this._current補間器の開始値として使用していますが、設定していますthis._current = i(0)。インターポレーターを 0 で呼び出すと開始値が返されるため、this._currentarcDataTween が実行されるたびに基本的に同じ値に設定されます。おそらくあなたが望むのは、設定することですthis_current = a（または、同等に、this._current = i(1)）。

命名規則に関するちょっとした注意として、カスタム トゥイーンの最初の引数は実際にはデータなので、通常は で示されdます。3 番目の引数は要素の現在の属性またはスタイル値であり、通常は(eg )aとして示されるため、これを使用すると混乱する可能性があります。afunction arcDataTween(d, i, a) {}

最後に、初期データのscoreはゼロでありscore、パイ レイアウトの値として使用しているため、場合によっては startAngle と endAngle に対して NaN を返します。これが視覚的にどのような影響を与えるかはわかりませんが、おそらくあなたが望むものではありません. パイ レイアウトの値アクセサーは、そのセグメントによって表されるパイの割合を表す数値を常に返す必要があります。NaN 角度を避けるために、セグメント値を計算する前に、スコア 0 のデータを除外することをお勧めします。

于 2013-10-15T19:04:38.090 に答える