在使用 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
时,动画开始工作并且两个点互换。为什么字段名称必须相同?
最佳答案
这是因为 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
并且没有节点被选中进行更新。
有几种方法可以解决这个问题:
- 重命名字段并使它们保持一致。推荐:它使维护代码更容易。
- 将关键函数写成:
.data(data2, function (d) { return d.well || d.name; })
。更少的代码,更适合一次性可视化。
关于javascript - 键未正确绑定(bind)到 D3 中的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21814839/