D3 で特定のキー機能をデータム データ バインディングに関連付ける方法を考えていました。これは で可能のよう.data([values[, key]])ですが、キーは.datum([value])バインディングのパラメーターとして使用できません。
これは、更新された値がデータ配列の末尾に追加されず、途中で粒度の変更に寄与する SVG パスを描画する場合に特に重要になります。
この例は、このケースを示しています: http://jsfiddle.net/vastur/LtHyZ/1/
各データ ポイントは [(x),(y)] タプルです。赤い点は、x 軸のキー機能に従って適切に移動しています。
.data(lineData, function(d) {return d[0]})
ただし、ラインは datum() を使用して作成されるため、キー関数は関連付けられていません。その結果、間に新しいデータ ポイントが追加されると、線分が非論理的に移動します。
では、この例では、赤い点の動きに合わせて線の頂点を移動させるにはどうすればよいでしょうか?