对可重用图表的一些澄清

在" 迈向可重复使用的图表 "中,迈克在最后列出了一个示例时间序列图表.在其中,他有这条线:

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

这发生在可重用图表对象的定义中.我很难掌握这个陈述.

首先,为什么要使用select(this)？是this上下文图表对象的当前实例？如果是这样,为什么还要麻烦,为什么不继续选择页面上的svg元素呢？

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

为什么[data],而不仅仅是data,像我见过的大多数其他例子一样？此外,为什么我们将数据绑定到svg元素,而不是(比如说)路径元素？

我会感激任何帮助.

如本文中所定义的,可重复使用的图表可用于将图表插入任何DOM元素,可能在同一页面上多次,尽管有所不同data.此外,由于您已指出的语句,它可用于更新已存在于DOM元素中的图形.它的使用方式是(来自文章):

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 

  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);