Javascript 如何向d3条形图添加注释数组？

通过读取CSV数据，然后使用

d3.nest（）

对每年每个日期的数据进行分组，我成功地为每年的数据绘制了一个条形图（我知道它是倒置的：）。请参见block或blockbuilder。 然而，我现在正试图将我的

注释
数组中的注释附加到每个图表中，我被卡住了

我尝试的一种方法是
selectAll（“.charts”）
并附加我的嵌套注释数组，即
annotationsPerYear
。但我发现很难将注释speryear键与图表连接起来，然后迭代并将每年的注释附加到正确的图表上。有什么想法吗？
您可以依靠嵌套选择来实现这一点。您已将嵌套选择用于此位：

svg.selectAll(".bar")
  .data(function(d) {return d.values;})

上面将不同的数据绑定到前面创建的3个SVG中的每个SVG。它通过调用
函数（d）
三次来实现这一点，并每次返回不同的
d.values

您可以执行类似的操作，在每个SVG中绑定和创建一组不同的注释。您需要一个函数（传递给
data（）
）来返回每个图表的适用注释，但这次您没有像
d.values
这样预先计算的内容。相反，您必须使用
filter（）
从
annotations
数组中提取适用的注释：

然后，您可以使用
enter（）
和
append（）
创建文本并定位。我不知道你打算怎么安排，但你总想这样：

svg.selectAll(".annotation")
  .data(function(d) {
    return annotations.filter(function(a) { return a.key == d.key; });
  })
.enter()
  .append("text")
  .attr("class", "annotation")
  .attr("x", function(d) { return x(d.xPos); })
  .attr("y", function(d) { return d.yPos; })
  .text(function(d) { return d.note; })

见：




太好了，谢谢。是的，一旦我找到了匹配的钥匙，我就要这样布置了。我注意到闰年现在有一个单独的问题，例如2016年的数据包括2月29日。我猜这可以在我设置x.domain的地方解决？或者我应该在这里发布一个新问题？是的，这是一个独立的、非琐碎的问题，可能值得发布自己的帖子。是的，它应该通过x标度来解决，或者切换到时间标度，或者确保顺序标度的域包括第29个。前者是复杂的（因为定位/确定横杆的尺寸变得更加复杂），后者意味着每年都会出现第29个横杆（非闰年没有横杆）。所以这取决于你想要实现什么。
svg.selectAll(".annotation")
  .data(function(d) {
    return annotations.filter(function(a) { return a.key == d.key; });
  })
.enter()
  .append("text")
  .attr("class", "annotation")
  .attr("x", function(d) { return x(d.xPos); })
  .attr("y", function(d) { return d.yPos; })
  .text(function(d) { return d.note; })