1

SVG円としてプロットされた単純なd3.js時系列グラフがあります。円はキーバインドされているため、配列の末尾からデータを削除すると、右の円が削除され、配列の先頭からアイテムを削除すると、左の円が削除されexit.remove()ます。

var circles = svg.selectAll('circle')
    .data(data, function(d){return d.key})

今、私は SVG パスで同じことをしたいと思っています。キーバインドを SVG パスに適用する方法はありますか?

4

1 に答える 1

1

SVGパスを使用してd3でライブ更新プロットを作成したいときに、同様の問題が発生しました。d3 は、データ シーケンス全体に対して 1 つのパス要素のみを使用します。つまり、特定の配列に対して、データによっては非常に長くなるパスが 1 つ描画されます。つまり、d3 は、円などの DOM 要素を削除することによって、バインドされたデータ要素を単純に削除することはできません。のようなものを変更する必要があり<path d="M0,0L1,0L2,1L3,2">ます<path d="M1,0L2,1L3,2">。残念ながら、d3 にはこの機能がないと思います (ただし、これを自分でコーディングすることはできます! d3.interpolateString をオーバーライドし、ドロップされたポイントに気付くカスタム インターポレーターを作成する必要があります)。

これは、データが svg 円のような複数の要素を持つグループで機能するため、D3 のデータ セレクターを使用できないことも意味します。代わりに使用する必要がselect("#yoursvgpath").datum(data)あります。これは、データがデータ配列である単一の要素のデータを設定します。

コードが実行されるハードウェア (デスクトップ i7、ssd など) が高速であることはわかっていたので、要素を追加または削除するたびにパスを書き直しました。それでも、特にポイント数が約 10,000 を超えると、Firefox ではかなり遅くなります (ただし、Chrome では問題ありません)。再描画するには、datum をもう一度呼び出してから、座標トランスフォーマーを再適用します ( select("#yoursvgpath").attr("d", line)line がパス データ トランスフォーマーであるようなもの)。パスが常に再計算されないように、5,000 個のデータ要素ごとにのみ再描画することになりました。

これのいずれかが混乱している場合は、d3 での折れ線グラフの作成について必ず読んでください。これは、ポイントベースのグラフとはかなり異なります (そして直感的ではありません)。d3 の選択と折れ線グラフの詳細については、https ://gist.github.com/mbostock/1642874とhttp://bost.ocks.org/mike/selection/も参照してください。

于 2013-08-12T14:23:52.373 に答える