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

Question

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

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

有没有办法做到这一点 ？

Answer 1

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

为了实现您的目标，您可以执行类似于以下示例的操作。现场版见 fiddle :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>

您会看到 key 函数由两部分组成。第一部分是为数据数组设计的:

(d && d.key)

那部分将返回 undefined对于 d3 选择中的元素。第二部分针对这些元素:

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