Question

我正在使用this mbostock example作为指南，但它是在d3 v3中。我已经在v4中看到，选择已经改变，但这似乎不是我的问题，因为数据永远不会改变 - 这是一个静态图表（现在）。

我有一个对象数组，我希望为每个对象创建一个组（g），为每个rect和{创建两个矩形（field1）该对象的{1}}与日期相关。我可以创建组，但是当我在尝试制作矩形时field2，输入组似乎是空的。

有人可以解释为什么会这样吗？

更新： jsfiddle (working) - 感谢@ gerardo-furtado

.data(d => d)

Answer 1

在D3中，data必须是一个数组。如果你看一下Bostock的例子，layers是一个数组数组。这是console.log(layers)：

的结果

Array[4]
    0:Array[58]
    1:Array[58]
    2:Array[58]
    3:Array[58]

因此，因为layers是一个数组数组，所以稍后在代码中Bostock写道：

.data(function(d) { return d; })

他正在将一个数组传递给data，该数组有效。

但是，在您的代码中，您在data的输入选择中将对象传递给rect：

Object {date：Thu Oct 13 2016 18:00:00 GMT + 1100，field1：19，field2：83}

解决方案：将数组传递给data。这是我做的唯一改变：

.data(d => [d])

现在你有一个数组：

[{date：Thu Oct 13 2016 18:00:00 GMT + 1100，field1：19，field2：83}]

PS：您必须调整条形的y和height。