如何在d3条形图中添加一组注释

How to add an array of annotations to a d3 barchart?

本文关键字：一组 注释 添加 d3 条形图      更新时间：2024-02-18

我已经通过读取CSV数据，然后使用d3.nest()对每年每个日期的数据进行分组，为每年的数据绘制了一个条形图（我知道它是倒置的：），请参阅此处的块或此处的块生成器。然而，我现在正试图将annotations数组中的注释附加到每个图表中，结果我被卡住了。

我正在尝试的一种方法是selectAll(".charts")并附加我的嵌套注释数组，即annotationsPerYear。但我发现很难将我的annotationsPerYear键与图表结合起来，然后迭代并将每年的注释附加到正确的图表上。有什么想法吗？

您可以依靠嵌套选择来实现这一点。您已经在使用嵌套选择与此位：

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

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

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

svg.selectAll(".annotation")
  .data(function(d) {
    // return annotations whose key matches d's key
    return annotations.filter(function(a) { return a.key == d.key; });
  })

然后你可以使用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; })

参见：

  • 更新的块
  • 更新的块生成器
相关文章：