Question

我有一堆带有id的SVG文本元素：

<text id = "id1">text1</text>
<text id = "id2">text2</text>
<text id = "id3">text3</text>
...
<text id = "abc1">textABC1</text>
<text id = "abc2">textABC2</text>
<text id = "abc3">textABC3</text>

来自websocket的数据：

var data = [{"id": "id1", "val":1}, {"id": "id2", "val":2}, {"id": "id3", "val":3}];

所以我需要在文本元素中更新文本（带val属性），但仅限于匹配id = id *的元素（不适用于abc * ids）

我尝试使用它：

d3.selectAll("text")
    .data(data, function(d) { 
        return this.id = d.id; 
    })
    .text(function(d) { 
        return d.val;
    });

但是我可以看到这里的逻辑是数据数组中的元素数量应该与选择中的元素数量相匹配

Answer 1

除非您提供关键函数作为selection.data([data[, key]])的第二个参数，否则数据将仅与索引匹配。

如果未指定键功能，则数据中的第一个数据将分配给第一个选定元素，第二个数据分配给第二个选定元素，依此类推。可以指定一个关键函数来控制将哪个数据分配给哪个元素，替换默认的索引连接。

但是，如果你做提供了一个关键功能，那么值得注意的是，首先会为选择中的每个元素调用此函数，然后对数据中的每个新数据进行评估。阵列。或者，正如文档所说：

为每个选定元素评估此关键函数，按顺序传递当前数据（d），当前索引（i）和当前组（节点），将其作为当前DOM元素（节点[一世]）。然后还为数据中的每个新数据评估关键函数，传递当前数据（d），当前索引（i）和组的新数据，并将其作为组的父DOM元素。给定键的数据被分配给具有匹配键的元素。

要通过ID将新数据与现有文本相匹配，您可以通过指定键功能来使用此功能，如下所示：

d3.selectAll("text")
  .data(data, function(d) { return this.id || d.id; })

这将评估第一次运行中的文本元素'ID，即this.id，以及第二次运行中的数据ID，从而将元素与新数据匹配。

请查看以下代码片段以了解正常工作：

var data = [{"id": "id1", "val":1}, {"id": "id2", "val":2}, {"id": "id3", "val":3}];

d3.selectAll("text")
  .data(data, function(d) { return this.id || d.id; })
  .text(d => d.val);

<script src="https://d3js.org/d3.v4.js"></script>
<svg>
  <text id="id1" y="10">text1</text>
  <text id="id2" y="25">text2</text>
  <text id="id3" y="40">text3</text>
  <text id="abc1" y="55">textABC1</text>
  <text id="abc2" y="70">textABC2</text>
  <text id="abc3" y="85">textABC3</text>
</svg>

Answer 2

尝试为data ...

制作循环

var data = [{"id": "id1", "val":1}, {"id": "id2", "val":2},...];

$(data).each(function(i,d){
    d3.select("#"+d.id).text(d.val);
});

且没有jQuery

for(var i=0, ii=data.length; i<ii; i++){
    d3.select("#"+data[i].id).text(data[i].val);
}

使用D3将SVG文本元素id与数据id匹配

2 个答案: