javascript - d3 js 折线图采用两种不同的数据格式。我如何区分这两者？

Question

在研究d3的动画折线图时。

我遇到了两种不同的制作折线图的方法，但仍然无法区分两者之间的区别。

以下是两种情况。

1) 情况一 - 通过 .attr(d, line(data)) 绘制线条 2) 情况二 - 通过 .attr (d, function(d){return line(d)}) 画线

为什么有些情况下只调用line函数就可以画线， 而另一种情况要求我创建一个匿名函数并将行函数放入其中？

这是我遇到的示例案例。

1)案例一示例
https://bl.ocks.org/pjsier/28d1d410b64dcd74d9dab348514ed256

2)案例二示例
https://bl.ocks.org/phvaillant/53b90038b9c5ac5f6b817a4f63fbc2af

Answer 1

每当您看到 function(d) {...} 作为 .attr()、.style() 的参数时， .data()、.datum()、.each() 以及其他一些，d 指的是选择中每个元素的绑定(bind)数据。

但是如果您看到像第一种方法一样绘制的线:

.attr("d", line(data))`

选择中的每个元素都将被赋予相同的行:line(data)将为选择中的每个元素返回相同的值。如果您没有将任何数据绑定(bind)到选择，则可以采用此方法。要绘制多条不同的线，我们需要使用某种循环并更改 data 的值。如果将数据绑定(bind)到选择(这是 D3 的一个关键目的)，您应该像第二种方法一样使用该绑定(bind)数据 - 如果您决定使用多行，则会更容易。

在第二种方法中:

.attr("d", function(d) { return line(d); })

选择中每个元素的绑定(bind)数据都会传递给 line()，因为每行的绑定(bind)数据可以不同，您可以拥有不同的行而无需显式循环。对于多行，这肯定是惯用的方法，但对于单行，老实说，差异可以忽略不计。

<小时/>

我实际上没有在第一个示例的链接中看到 .attr("d", line(data))，第一个示例的链接似乎有 .attr("d ", line)，相当于第二个例子:

在第二个示例中，如下:

.attr("d", function(d) { return line(d); })

相当于:

.attr("d", line);

在更简单的行中，绑定(bind)数据被传递到 line 并针对选择中的每个项目执行 line。这是同一个 block updated来演示。