34

我经常看到.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);
4

3 回答 3

37

我认为文档很好地回答了这个问题：https ://github.com/mbostock/d3/wiki/Selections#wiki-datum 。

基本上，关键是在某些情况下，当您进行选择时，您对进入/退出集不感兴趣。如果是这种情况，通常似乎是完整图表的情况，则使用基准。

更新：这取决于：当您期望没有动态更新时，在您给定的示例中似乎就是这种情况，基准是可以的。为什么？因为还没有 path svg 元素，所以只有一个 path 元素，一旦添加它就不会改变。

如果您在哪里有多个路径元素和动态更改（例如，每秒钟后最旧的数据元素被删除并添加一个新元素），那么您将需要数据。这将为您提供三组：不再存在数据的图形元素集、更新数据的元素集和之前不存在数据项的元素集（分别是输入、更新和退出集）。一旦你需要这个，我建议你阅读 d3 文档。

显然，计算这三组并不是没有成本的。在实践中，这只会在您使用“大型”（我认为 d3 可以扩展到数千个项目）数据集时成为问题。

于 2012-11-01T16:26:36.537 回答
11

一个很好的例子教程是here。 http://bost.ocks.org/mike/selection/#data

于 2014-01-10T12:29:02.800 回答
7

其他链接到教程，但我认为selection.datum 上的 API 参考给出了公认的答案：

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

因为它不计算连接，所以它不需要知道关键函数。因此，注意两者的签名区别，只有data函数接受一个key函数

  • selection.datum([value])
  • 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)
于 2015-12-22T23:30:51.773 回答