绑定d3.js中的数据

Question

在此代码中： http : //bl.ocks.org/mbostock/3886208

第三个（数据）的功能是什么

.data(stack.keys(data.columns.slice(1))(data))

Answer 1

如果我们打破这一行并创建一些新变量来显示正在发生的事情，则可以更好地理解这一行。

首先，我们使用键访问器定义堆栈生成器：

var stack = d3.stack()
    .keys(data.columns.slice(1));

然后，我们栈中的数据（该data在这里对应于data在你的问题，这是堆叠中的数据）：

var stackedData = stack(data)
//data being stacked-----^

最后，我们绑定数据：

g.selectAll(".serie")
    .data(stackedData);

因此，您所说的第三个数据就是将要堆叠的数据。 问题是，在Bostock的代码中，没有像我一样在堆栈生成器变量中定义键访问器，而是将堆栈数据定义为新变量...

var stack = d3.stack()
    .keys(data.columns.slice(1));
var stackedData = stack(data);

...他一步一步地完成了data()函数内部的所有操作，具有相同的效果：

.data(stack.keys(data.columns.slice(1))(data))
//           ^---keys accessor           ^----data being stacked