Question

我正在尝试加入现有的输入文本（由d3.selectAll()选择），这些文本的唯一ID对应于与D3连接的数据中的键。我希望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>

您会发现关键功能包含两部分。第一部分是为数据阵列设计的：

(d && d.key)

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

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

使用d3.js将DOM的现有元素加入数据

1 个答案: