D3-更新時に要素の数は正しいが、値が間違っている

debugcn 投稿 Dev

thefreeline

配列の値を含む子divをdivに入力しています。最初のパスでは、配列は次のようになります。

arr_subpop_unique = ["CPL", "NAP", "NPL", "SAP", "SPL", "TPL", "UMW", "WMT", "XER"]

私の選択したenter / update / exitは次のようになります：

var sizemapHeader = d3.select("#d3-sizemap-hr").selectAll("div")
        .data(arr_subpop_unique)

    sizemapHeader.enter().append("div")
        .attr("class", "sizemap-hr-title ellipsis scroll_on_hover")
        .html(function(d,i){ return d; });

    sizemapHeader.exit().remove();

これは正常に機能し、文字列を含む各要素のdivを取得します。

関数を再度実行すると、データ配列が次のように更新されます。

    arr_subpop_unique = ["MAN_MADE", "NATURAL"]

更新により2つのdivが返されますが、これらには「CPL」と「NAP」（インデックス値0と1）が含まれています。これが最初の2つのインデックスを「MAN_MADE」と「NATURAL」に置き換えない理由を誰かが説明できますか？

助けてくれてありがとう... D3でのデータの入力/更新/終了の結合のコツをつかもうとしています！

プラトン

「一般的な更新パターン」を見てください
。d3の更新選択をトリガーしていないと思います。

var sizemapHeader =
d3.select("#d3-sizemap-hr").selectAll("div")
  .data(arr_subpop_unique)

sizemapHeader
.enter()
  .append("div")
    .attr("class", "sizemap-hr-title ellipsis scroll_on_hover")

sizemapHeader
    .html(function(d,i){ return d; });

sizemapHeader
.exit()
  .remove();

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]