D3js:何时使用.datum()和.data()？

Question

我经常看到.datum使用区域图表时.例如:

svg = d3.select("#viz").append("svg").datum(data)

.datum需要什么时候有任何经验法则吗？

var area = d3.svg.area()  
    .x(function(d) { return x(d.x); })  
    .y0(height)  
    .y1(function(d) { return y(d.y); });  

var svg = d3.select("body").append("svg")  
    .attr("width", width)  
    .attr("height", height);  

svg.append("path") 
    .datum(data)
    .attr("d", area); 

Answer 1

我认为文档给出了这个问题的一个很好的答案:https://github.com/mbostock/d3/wiki/Selections#wiki-datum.

基本上,关键是在某些情况下,当您进行选择时,您对进入/退出集不感兴趣.如果是这种情况(通常情况下是完整图表的情况),则使用数据.

更新:这取决于:当您期望没有动态更新时,在您给出的示例中似乎就是这种情况,数据是可以的.为什么？因为还没有路径svg元素,所以只有一个路径元素,一旦添加它就不会改变.

如果您在哪里有多个路径元素和动态更改(例如,每隔一秒后删除最旧的数据元素并添加新的数据元素),那么您将需要数据.这将为您提供三组:不再存在数据的图形元素集,更新数据的元素集以及之前不存在数据项的元素集(分别为输入,更新和出口集).一旦你需要这个,我建议你阅读d3文档.

显然,计算这三组并非没有成本.在实践中,当您使用"大"(我认为d3可扩展到数千个项目的数据集)数据集时,这应该只会成为一个问题.

Answer 2

这里有一个非常好的教程. http://bost.ocks.org/mike/selection/#data

Answer 3

其他链接到本教程,但我认为selection.datum上的API参考提供了接受的答案:

获取或设置每个选定元素的绑定数据.与selection.data方法不同,此方法不计算连接(因此不计算进入和退出选择).

由于它不计算连接,因此不需要知道关键功能.因此,注意两者之间的签名差异,只有data函数接受一个关键功能

• selection.datum([值])
• selection.data([values [,key]])

我认为该教程提供data了另一个更基本的区别,类似于"数据"和"基准"这两个词的含义.也就是说,前者是复数,后者是单数.因此,数据可以通过两种方式连接:

通过selection.data 加入元素组.

通过selection.datum 分配给各个元素.

@Hugolpz'的主旨给出了"群体"与"个体"重要性的很好例子.这里,json代表一个数据数组.请注意如何datum将整个数组绑定到一个元素.如果我们想要实现相同的,data我们必须首先将json放在另一个数组中.

• var chart = d3.select("body").append("svg").data([json])
• var chart = d3.select("body").append("svg").datum(json)