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

【问题标题】：Join existing elements of the DOM to data with d3.js使用 d3.js 将 DOM 的现有元素连接到数据
【发布时间】：2013-01-03 23:48:59
【问题描述】：

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

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

有没有办法做到这一点？

【问题讨论】：

示例代码：var inputs = d3.selectAll(".input").data(dt, function (d, i) {return dt[i].key;})
代码在什么情况下不起作用？你有一个完整的最小例子吗？
这对于在路径（陆地）上具有正确 ID 的现有 SVG 地理地图非常有用

标签： d3.js

【解决方案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")

【讨论】：

我花了一段时间才明白你的数据函数到底在做什么。把它简化成这样让我明白了： function(d) { return d ? d.key：this.id； })
@WouterCoekaerts 谢谢解释，原来的一行代码我也有半天没看懂……