使用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>

您看到关键功能包含两部分.第一部分是为数据阵列设计的:

(d && d.key)

该部分将返回undefinedd3选择中的元素.第二部分针对这些要素:

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