d3.js - d3.js を使用して DOM の既存の要素をデータに結合する

Question

d3.selectAll()D3 で結合されたデータのキーに対応する一意の ID を持つ既存の入力テキスト (で選択) を結合しようとしています。D3 に入力要素の ID をデータのキーに関連付けてもらいたいのですが、そうではありません。

関連付けは、DOM と配列にそれぞれ表示される順序で行われます。

これを行う方法はありますか？

Answer 1

キー関数は、データ配列の各要素 (つまり dt) と、選択した各要素 (つまり d3.selectAll(".input")) で呼び出されることに注意してください。どちらの場合も、キー関数は有効な値を返す必要があり、それらの出力値を使用して関連付けが行われます。

目標を達成するには、次の例のようにすることができます。ライブ バージョンのフィドルを参照してください: http://jsfiddle.net/2Fkjq/

ドキュメントに次のものが含まれている場合:

<div id="c"></div>
<div id="a"></div>
<div id="b"></div>

次に、これを実行します。

var data = [
    { key: "a", val: "aaa" },
    { key: "b", val: "bbb" },
    { key: "c", val: "ccc" }
];

d3.selectAll("div")
    .data(data, function(d) { return (d && d.key) || d3.select(this).attr("id"); })
    .text(function(d) { return d.val; });

この文書は次のようになります。

<div id="c">ccc</div>
<div id="a">aaa</div>
<div id="b">bbb</div>

キー機能が 2 つの部分で構成されていることがわかります。最初の部分は、データ配列用に設計されています。

(d && d.key)

その部分はundefined、d3 選択の要素に対して返されます。2 番目の部分は、次の要素を対象としています。

d3.select(this).attr("id")