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

Posted 2023-02-22

【中文标题】D3js：何时使用 .datum() 和 .data()？

【英文标题】：D3js: When to use .datum() and .data()?

【发布时间】：2012-10-22 06:48:17

【问题描述】：

使用面积图时，我经常看到.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); 

【问题讨论】：

可以在other thread中找到有关此主题的一些有用见解

【参考方案1】：

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

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

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

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

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

【讨论】：

感谢您的回答。我为基本面积图添加了更多代码。我想我不清楚为什么在这种情况下我使用 .datum 而不是 .data。我敢肯定，更好地理解 D3 就是答案！这就是我所追求的。

如果你只有一个路径元素和动态变化，我应该使用数据还是基准？比如我有一个折线图，但是图表中只有一条线，我应该使用数据吗？

新链接？ github.com/d3/d3-selection/#selection_datum

【参考方案2】：

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

【参考方案3】：

其他链接到tutorial，但我认为API reference on selection.datum 给出了公认的答案：

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

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

selection.datum([value]) selection.data([values[, key]])

我认为data 的教程给出了另一个更基本的区别，类似于“数据”和“数据”这两个词的含义。即“data”为复数，“datum”为单数。因此，可以通过两种方式连接数据：

通过selection.data加入组元素。

通过selection.datum分配给个人元素。

@Hugolpz'gist 给出了“群体”与“个人”的重要性的很好的例子。这里，json 代表一个数据数组。注意datum 如何将整个数组绑定到一个元素。 如果我们想用data 达到同样的效果，我们必须首先将 json 放入另一个数组中。

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