Question

在“Towards Reusable Charts”中，Mike最后列出了一个示例time-series chart。在其中，他有这条线：

// Select the svg element, if it exists.
var svg = d3.select(this).selectAll("svg").data([data]);

这发生在可重用图表对象的定义中。我很难理解这句话。

首先，为什么要使用select(this)？ this上下文是图表对象的当前实例吗？如果是这样，为什么还要麻烦，为什么不继续选择页面上的svg元素呢？
为什么selectAll？每个图表对象不对应一个图表吗？
为什么[data]，而不仅仅是data，就像我见过的大多数其他例子一样？此外，为什么我们将数据绑定到svg元素，而不是（比如说）路径元素？

我会感激任何帮助。

Answer 1

本文中定义的可重用图表可以用于将图表插入任何DOM元素，可能在同一页面上多次，尽管有不同的data。此外，由于您已指出的语句，它可用于更新已存在于DOM元素中的图形。它的使用方式是（来自article）：

var formatDate = d3.time.format("%b %Y");

var chart = timeSeriesChart()
             .x(function(d) { return formatDate.parse(d.date); })
             .y(function(d) { return +d.price; });

// Put the chart _inside_ #example1
d3.select("#example1")
  .datum(data1)
  .call(chart);

// Put the same chart _inside_ #example2
d3.select("#example2")
  .datum(data1)
  .call(chart);

// Update the data for #example1, without appending another <svg> element
setInterval(function () {
    d3.select("#example1")
      .datum(data2)
      .call(chart);
}, 5000);

现在要解决您对如何做到这一点的担忧：

首先请注意，此代码在selection.each(...)内运行。根据API参考，.each内的this上下文是DOM元素。 API参考文献进一步说：

通过在回调函数中使用d3.select（this），可以使用每个运算符递归处理选择。

因此d3.select(this)只返回仅包含当前DOM元素的d3.selection，其中可能包含或不包含<svg>元素。选择页面上的每个<svg>元素不会产生非常可重复使用的图表，因为它会使整个页面混乱，而不是仅显示您希望图表显示的DOM元素。
使用selectAll为D3创建新的元素分组，与保留原始分组的select相对。有关嵌套选择如何工作的更多详细信息，请参阅此article。是的，你是对的，这里的selectAll组将仅用于创建或更新一个<svg>元素，这将我们带到下一点。
D3背后的一个基本概念是data-joins，其中数组的数据连接到一个中的一组DOM元素em>一对一的时尚。在这种情况下，我们有兴趣将一些data附加/更新到恰好一个<svg>元素。使用[data]为我们提供了一个可以绑定到一个<svg>元素的单元素数组。或者，这可以写成：

  var svg = d3.select(this).selectAll("svg").data([1]); // No `data`

   // Update the area path.
   g.select(".area")
      .data(data)    // Specifying data explicitly
      .attr("d", area.y0(yScale.range()[0]));

   // Update the line path.
   g.select(".line")
      .data(data)   // Specifying data explicitly
      .attr("d", line);

但是，通过将数据绑定到<svg>元素，数据已经可用于令人愉悦的。

Answer 2

可重复使用的图表只是图表应该已经创建，我们可以简单地获得图表的好处。我们不需要花时间从头开始创建图表。

致谢：Reusabe Charts for d3

对可重用图表的一些澄清

2 个答案: