D3.js 关于可重用图表的一些澄清

在这篇文章中，迈克在最后给出了一个例子。在书中，他有这样一句话：

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

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

首先，为什么要用这个？此上下文是否为图表对象的当前实例？如果是这样的话，为什么不麻烦呢？为什么不直接在页面上选择svg元素呢

为什么选择全部？不是每个图表对象都对应一个图表吗

为什么是[数据]，而不是像我所看到的大多数其他例子中那样仅仅是数据？此外，为什么我们要将数据绑定到svg元素，而不是路径元素

---

如果有任何帮助，我将不胜感激。

本文中定义的可重用图表可用于将图表插入任何DOM元素，可能在同一页面上多次插入，尽管数据不同。此外，根据您指出的语句，它可以用于更新DOM元素中已经存在的图形。其使用方式如下：

var formatDate=d3.time.format%b%Y； var图表=时间序列 .xFunction{return formatDate.parsed.date；} .y函数{return+d.price；}； //将图表放入示例1中 d3.选择示例1 .datumdata1 .呼叫图； //将相同的图表放入示例2中 d3.选择示例2 .datumdata1 .呼叫图； //更新示例1的数据，而不附加其他元素 设置间隔函数{ d3.选择示例1 .datumdata2 .呼叫图； }, 5000; 现在，为了解决您对它如何做到这一点的担忧：

首先请注意，此代码在selection中运行。每个。。。。根据API引用，此上下文中的元素是DOM元素。API参考文件进一步说明：

通过使用d3，可以使用each运算符递归处理选择。在回调函数中选择this

因此d3.selectthis只返回一个仅包含当前DOM元素的d3.selection，其中可能包含也可能不包含元素。选择页面上的每一个元素都不会产生一个可重用的图表，因为它会弄乱整个页面，而不仅仅是希望图表出现在其中的DOM元素

使用selectAll为D3创建一个新的元素分组，而不是保留原始分组的select。有关嵌套选择如何工作的详细信息，请参见此。没错，这里的selectAll组只用于创建或更新一个元素，这就引出了下一点

D3背后的一个基本概念是，数据数组以一对一的方式连接到一组DOM元素。在本例中，我们感兴趣的是在一个元素上添加/更新一些数据。使用[data]为我们提供了一个可以绑定到一个元素的单元素数组。或者，这可以写成：

var svg=d3.selectthis.selectAllsvg.data[1]；//没有`数据` //更新区域路径。 g、 选择区域 .datadata//显式指定数据 .attrd，area.y0yScale.range[0]； //更新行路径。 g、 选择.line .datadata//显式指定数据 .attrd，行；

---

但是，通过将数据绑定到元素，子选择中的数据已经可用，这更令人高兴。

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

---

信用证：

数据似乎被绑定到svg，因此可以在同一个函数中创建和更新svg元素。这对吗？谢谢！这肯定把事情弄清楚了。一个快速跟进：绑定到svg的数据是否自动可用于其所有子节点？我试图用它来画两条路径，它们都是孙辈svg>g>path，但它似乎不起作用。我必须将数据重新绑定到这些特定路径。但是有一种方法可以使用svg数据，对吗？这取决于您是使用selectAll加上连接还是普通附加来添加子级。你能把你的代码作为一个单独的问题或在原始问题中发布以供审查吗？@musially\u ut New question: