d3.js - 使用 d3.js 将 DOM 的现有元素连接到数据

Question

我正在尝试加入现有的输入文本（由 选择d3.selectAll()），这些文本具有与与 D3 连接的数据中的键相对应的唯一 ID。我希望 D3 将输入元素的 ID 与数据的键相关联，但事实并非如此。

关联是按照它们分别出现在 DOM 和数组中的顺序进行的。

有没有办法做到这一点 ？

Answer 1

请记住，将对数据数组的每个元素（即 dt）以及选择中的每个元素（即 d3.selectAll(".input")）调用 key 函数。在这两种情况下，键函数都需要返回一个有效值，并且这些输出值将用于建立关联。

为了实现您的目标，您可以执行以下示例。现场版本见小提琴：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>

您会看到关键功能由两部分组成。第一部分是为数据数组设计的：

(d && d.key)

该部分将返回undefinedd3 选择中的元素。第二部分针对这些元素：

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