在 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