D3 data() vs. datum()

D3 data() vs. datum()

本文关键字：datum vs data D3      更新时间：2023-09-26

在Mike Bostock的' Towards Reusable Charts '中，为什么<p>元素的初始数据链接使用datum(data):

d3.csv("sp500.csv", function(data) {
  var formatDate = d3.time.format("%b %Y");
  d3.select("#example")
      .datum(data)
    .call(timeSeriesChart()
      .x(function(d) { return formatDate.parse(d.date); })
      .y(function(d) { return +d.price; }));
});
在chart()函数中，data([data]): 将数据链接到<svg>元素
// Select the svg element, if it exists.
var svg = d3.select(this).selectAll("svg").data([data]);
// Otherwise, create the skeletal chart.
var gEnter = svg.enter().append("svg").append("g");
gEnter.append("path").attr("class", "area");
gEnter.append("path").attr("class", "line");
gEnter.append("g").attr("class", "x axis");

Mike在他自己的回答中说这两种方法是可以互换的，除了前者不计算连接。那么为什么要在这里使用data(数据)呢?

我也不太明白如果已经有一个<svg>元素作为评论行建议会发生什么。对我来说，在这种情况下，输入选择是空的，没有进一步的追加将工作…

我一定是误会了什么……

谢谢你的帮助!

在第二种情况下使用.data([data])的优点是，如果没有SVG，则输入选择的处理会添加SVG。如果SVG存在，则代码完全等同于.datum(data)—绑定到元素的数据被更改，其他事情不发生。

相关文章：