javascript - 键未正确绑定(bind)到 D3 中的元素

Question

在使用 D3 中的键将值绑定(bind)到 SVG 元素后，我无法更新数据。

这是一个例子。这是我用来跟踪宾夕法尼亚州钻井地点的示例 CSV 文件。

name,lat,lng,company,production
1,40.543401,-79.162257,Shell,20000
2,40.608186,-79.369354,Shell,40000
3,40.558923,-79.630966,Shell,10000
4,40.431514,-79.466171,Range,25000
5,40.439876,-80.015488,Range,26000
6,42.173455,-80.513306,CNX,30000
7,39.927082,-74.788055,CNX,120000
8,40.045964,-75.10962,Chesapeake,15000
9,40.822611,-77.839508,Chesapeake,16000

我使用以下代码将此数据绑定(bind)到 g 元素:

d3.csv("data.csv", type, function(error, data) {
    wells = chart.selectAll(".well")
      .data(data, function(d){ return d.name; }).enter()
      .append("g")
      .attr("class", "well")
      .attr("id", function(d){ return d.name })
      .attr("transform", function(d){ return "translate(" + projection([d.lng, d.lat])[0] + "," + projection([d.lng, d.lat])[1] + ")"; } );

    wells.append("circle")
      .attr("r", 4);
});

请注意，我绑定(bind)该数据的键是 name。

引入 data2.csv，除了唯一的 id 被称为 well 而不是 name 之外，它实际上是相同的，并且两个 lat-lng 对被交换了。

well,lat,lng,company,production
100,40.543401,-79.162257,Shell,20000
2,40.608186,-79.369354,Shell,40000
3,40.558923,-79.630966,Shell,10000
4,40.431514,-79.466171,Range,25000
5,42.173455,-80.513306,Range,26000
6,40.439876,-80.015488,CNX,30000
7,39.927082,-74.788055,CNX,120000
8,40.045964,-75.10962,Chesapeake,15000
9,40.822611,-77.839508,Chesapeake,16000

当我重新绑定(bind)数据并更新时，没有任何反应。

d3.csv("data2.csv", type, function(error, data2) {  
    var wells = chart.selectAll(".well")
      .data(data2, function(d){ return d.well; })
      .transition().duration(1000)
      .attr("transform", function(d){ return "translate(" + projection([d.lng, d.lat])[0] + "," + projection([d.lng, d.lat])[1] + ")"; } );
});

当我在 data2.csv 中将 well 改回 name 时，动画开始工作并且两个点互换。为什么字段名称必须相同？

Answer 1

这是因为 key argument to data function works .来自文档:

... the key function is invoked once for each element in the new data array, and once again for each existing element in the selection.

当它在现有元素上调用时(具有字段为 name 而不是 well 的数据)，它返回 undefined 并且没有节点被选中进行更新。

有几种方法可以解决这个问题:

1. 重命名字段并使它们保持一致。推荐:它使维护代码更容易。
2. 将关键函数写成:.data(data2, function (d) { return d.well || d.name; })。更少的代码，更适合一次性可视化。