Javascript 如何绑定data.key-->；d3js中现有标记上的element.id？

我有一个现有的

，我定义了组

，其中每个组都有自己的唯一id

<g id="id_1"><text>...</text></g>
<g id="id_2"><text>...</text></g>
<g id="id_3"><text>...</text></g>
<g id="id_4"><text>...</text></g>

每行。注意，并非所有id都匹配

我不希望替换

，而是希望将每个数据行绑定到id匹配的正确

标记。

d3.select（'g'）.data（d3.values（data））

的默认行为不支持此操作，因为它将按索引绑定。我该怎么做

我在jsbin上有一个示例代码，其中包含索引数据绑定，您可以修改它

---

您缺少删除命令。添加

nodesUpdate.exit（）.remove（）

删除未映射的svg元素。您还需要将

.data（d3.values）

更改为

.data（d3.entries）

，以确保键匹配

var数据={
“id_2”：{
“姓名”：“约翰·多伊”，
“描述”：“一个普通人”
},
“id_4”：{
“姓名”：“安女士”，
“描述”：“留着长发”
},
“id_8”：{
“姓名”：“卢克·福斯”，
“说明”：“绿色光剑”
}
};
addEventListener（“加载”，函数（）{
绑定（数据）；
});
函数绑定（数据）{
//获取svg元素
var svg=d3.选择（“svg”）；
//按索引选择和绑定数据
nodesUpdate=svg
.全选（“g”）
.数据（d3.条目（数据））；
//更新数据
节点更新
.选择（“文本”）
.文本（功能（d）{
返回d.value.Name+“：”+d.value.Description；
});
nodesUpdate.exit（）.remove（）；
//但我真正想要的是匹配数据，以便数据[id_2]匹配
//到等。更新集中不应包括节点1和3！
}

-- 1 --
-- 2 --
-- 3 --
-- 4 --

您缺少删除命令。添加

nodesUpdate.exit（）.remove（）

删除未映射的svg元素。您还需要将

.data（d3.values）

更改为

.data（d3.entries）

，以确保键匹配

var数据={
“id_2”：{
“姓名”：“约翰·多伊”，
“描述”：“一个普通人”
},
“id_4”：{
“姓名”：“安女士”，
“描述”：“留着长发”
},
“id_8”：{
“姓名”：“卢克·福斯”，
“说明”：“绿色光剑”
}
};
addEventListener（“加载”，函数（）{
绑定（数据）；
});
函数绑定（数据）{
//获取svg元素
var svg=d3.选择（“svg”）；
//按索引选择和绑定数据
nodesUpdate=svg
.全选（“g”）
.数据（d3.条目（数据））；
//更新数据
节点更新
.选择（“文本”）
.文本（功能（d）{
返回d.value.Name+“：”+d.value.Description；
});
nodesUpdate.exit（）.remove（）；
//但我真正想要的是匹配数据，以便数据[id_2]匹配
//到等。更新集中不应包括节点1和3！
}

-- 1 --
-- 2 --
-- 3 --
-- 4 --

尝试

d3.entries（data）

而不是

d3.values（data）

，因为调用

d3.values

时会丢失任何id信息。另外，什么是

.bind

函数。我在d3文档的任何地方都找不到它？对不起，那应该是数据，而不是绑定。在我的Q上更改它以避免混淆。谢谢@LarsKotthoff，真是太棒了！但是，这个解决方案对我来说毫无意义，如果你想制定一个包含解释的答案，我将为你的答案打分。请尝试

d3.entries（data）

而不是

d3.values（data）

，因为调用

d3.values

时会丢失任何id信息。还有，

.bind

函数是什么。我在d3文档的任何地方都找不到它？对不起，那应该是数据，而不是绑定。在我的Q上更改它以避免混淆。谢谢@LarsKotthoff，真是太棒了！但是这个解决方案对我来说毫无意义，如果你想制定一个包含解释的答案，我会相信你的答案。对不起，你没有抓住我问题的全部要点。我的问题是绑定key->id，而不是按索引绑定。然后，输出将为我[--1--][John Doe:一个普通人][--3--][Ann Lady:有长头发]数据中绑定到具有正确id的g元素的每一行，然后只更新其中的那些。其他元素不会被删除或更改。@sunefred您是否尝试在同一个svg中混合元素，其中一些绑定到d3，而另一些则没有？然后把这两个元素排序在一起？我不知道你说的把元素排序在一起是什么意思。但让我解释一下我的特殊问题。我有一个流程图，上面有一堆描述工业过程的传感器。每个传感器都有一个id，并手动放置在流程图中的正确位置。从服务器检索数据，但有时数据可能丢失或顺序奇怪。我所知道的是，每个传感器的数据都包括我在绘制svg时使用的id。所以，我只想更新那些具有来自服务器的数据的传感器，即具有匹配id的传感器。因此，初始数据不是使用d3.js绘制的，对吗？如果是这样的话，那么使用jQuery更新文本节点并添加新节点会更容易些吗？很抱歉，您错过了我问题的全部要点。我的问题是绑定key->id，而不是按索引绑定。然后，输出将为我[--1--][John Doe:一个普通人][--3--][Ann Lady:有长头发]数据中绑定到具有正确id的g元素的每一行，然后只更新其中的那些。其他元素不会被删除或更改。@sunefred您是否尝试在同一个svg中混合元素，其中一些绑定到d3，而另一些则没有？然后把这两个元素排序在一起？我不知道你说的把元素排序在一起是什么意思。但让我解释一下我的特殊问题。我有一个流程图，上面有一堆描述工业过程的传感器。每个传感器都有一个id，并手动放置在流程图中的正确位置。从ser检索数据

data = { "id_2" : { "name" : value1, "description" : value2, ... }, 
         "id_4" : { "name" : value1, "description" : value2, ... }, 
         "id_9" : { "name" : value1, "description" : value2, ... } };