对可重用图表的一些澄清 [英] Some clarification on reusable charts

问题描述

在迈向可重复使用图表中，Mike列出了一个示例时间序列图表。在它，他有这一行：

In 'Towards Reusable Charts', Mike lays out an example time-series chart at the end. In it, he has this line:

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

这是在可重用图表对象的定义中发生的。

This is happening within the definition of a reusable chart object. I am having a hard time grasping this statement.

1. 首先，为什么使用 select（this）？是这个上下文是图表对象的当前实例吗？

1. First, why use select(this)? Is the this context the current instance of the chart object? If so, why bother, why not just go ahead and select the svg elements on the page?

为什么选择 selectAll ？每个图表对象是否与一个图表对应？

Why the selectAll? Doesn't each chart object correspond to one chart?

为什么 [data] data ，像我在其他例子中看到的？此外，为什么我们将数据绑定到svg元素，而不是（比方说）路径元素？

Why [data], instead of just data, like in most other examples I've seen? Further, why are we binding the data to the svg element, rather than to (say) the path elements?

推荐答案

如本文中定义的可重用图表可用于插入图表到任何DOM元素，可能在同一页面上多次，虽然有不同的数据。此外，由于您已指出的语句，它可用于更新一个已在DOM元素中存在的图形。其使用方式（来自文章）：

A reusable chart, as defined in the article, can be used for inserting the chart to any DOM element, possibly multiple times on the same page, albeit with different data. Moreover, owing to the statement you have pointed out, it can be used to update a graph which already exists within a DOM element. The way it would be used is (from the 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);

现在，为了解决您对如何的关注：

Now to address your concerns of how it does that:

1. 首先请注意，此代码在 selection.each（...）。根据API参考资料，中的此上下文。每个都是DOM元素。 API参考进一步说：

1. First note that this code is run inside selection.each(...). As per the API reference, the this context inside .each is the DOM element. The API reference further goes to say:

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

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> 元素。在页面上选择一个/ every < svg> 元素不会产生一个非常可重复使用的图表，因为它会乱掉整个页面而不是你想要的DOM元素

So d3.select(this) just returns a d3.selection containing only the current DOM element, which may or may not contain an <svg> element inside it. Selecting a/every <svg> element on the page will not result in a very reusable chart since it'll mess with the complete page instead of only the DOM element you want the chart to appear in.

使用 selectAll 创建一个新的元素分组， ，与选择相反，保留原始分组。有关嵌套选择的工作原理的详情，请参阅此文章。是的，你是对的，这里的 selectAll 组将用于创建或更新一个< svg>

Using selectAll creates a new grouping of elements for D3 to work on, opposed to select which preserves the original grouping. See this article for more details on how nested selections work. And, yes, you are right that the selectAll group here will be used to create or update only one <svg> element, which brings us to the next point.

D3的基本概念之一是数据连接，其中数据的数组 连接到一对一的时尚。在这种情况下，我们有兴趣将一些数据附加/更新到一个< svg> 元素。使用 [data] 为我们提供了可以绑定到一个< svg> 元素的单元素数组。或者，这可以写成：

One of the underlying concepts behind D3 is data-joins, where an array of data is joined to an group of DOM elements in a one-to-one fashion. In this case, we are interested in appending/updating some data to exactly one <svg> element. Using [data] provides us with a one-element array which can be bound to one <svg> element. Alternatively, this could have been written as:

  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> 元素。

However, it is more pleasing to have data already available to the sub-selections by binding it to the <svg> element.

这篇关于对可重用图表的一些澄清的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！