d3.js - 关于可重用图表的一些说明

Question

在'Towards Reusable Charts '，迈克举了一个例子 time-series chart在末尾。在其中，他有这样一行:

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

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

一、为什么要用select(this) ?是this context 图表对象的当前实例？如果是这样，何必呢？为什么不直接选择页面上的 svg 元素呢？

为什么 selectAll ?每个图表对象不都对应一个图表吗？

为什么[data] , 而不仅仅是 data ，就像我见过的大多数其他例子一样？此外，为什么我们将数据绑定(bind)到 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 引用，this .each 内的上下文是 DOM 元素。 API引用进一步说:

The each operator can be used to process selections recursively, by using d3.select(this) within the callback function.

所以d3.select(this)只返回一个 d3.selection仅包含当前 DOM 元素，可能包含也可能不包含 <svg>里面的元素。选择一个/每个 <svg>页面上的元素不会产生一个非常可重用的图表，因为它会弄乱整个页面，而不仅仅是您希望图表出现在其中的 DOM 元素。

使用 selectAll为 D3 创建一个新的元素组，与 select 相对。它保留了原始分组。看到这个article有关嵌套选择如何工作的更多详细信息。而且，是的，你是对的，selectAll这里的组将仅用于创建或更新一个 <svg>元素，这将我们带到下一点。

D3 背后的基本概念之一是data-joins。 ，其中数据数组以一对一的方式连接到一组 DOM 元素。在这种情况下，我们有兴趣添加/更新一些 data精确到一个 <svg>元素。使用 [data]为我们提供了一个可以绑定(bind)到一个 <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);

但是，通过将数据绑定(bind)到 <svg> 让子选择已经可以使用数据会更令人愉悦。元素。