html - d3 更新の選択: d3 はどの既存の html 要素を独自に使用するためにキャプチャするかをどのように決定しますか?

Answer 1

呼び出すdata(dataset)と、ページに既に 1 つの要素がある場合、d3 は、この要素を関連付ける必要があると判断します (10最初の配列要素のデータ)。これは、その要素が<p>ページの 0 番目であるため、データセットの 0 番目の要素に関連付ける必要があるためです。つまり、配列内のインデックスに基づいて永続性を決定しています。その結果、既存の要素も、値に関連付けられた可能性のある要素も関数10によって返されenter()ません。これらは新しい要素とは見なされず、既存の要素に関連付けられたデータの置き換えにすぎないためです。

実際のデータに基づいて永続性を判断する場合は、data()関数に 2 番目のパラメーターを渡す必要があります。

data(dataset, function(d, i) { return d; })
// NOTE: "return i;" would have the same effect as not passing in the 2nd param

これで、 d3 はdそれぞれの場合を比較します (これは 0 番目の要素とnull既存の要素の 10<p>です) が等しくないため、 によって返される選択に 0 番目の要素を含める必要があると判断しますenter()。次に、その要素を追加します。

この時点で、d3 に関する限り、既存の要素を削除する必要があり、それをexit()選択して返すので、それを呼び出すことができますremove()。

または、目標に応じて、data()呼び出しを単一パラメーターのままにして、そのテキストを更新することができますenter()。選択からではなく、メインの「更新」選択からです。この jsFiddle を参照してください。