如何使用d3.js在堆积条形图的顶部添加一条线？

Question

我能够得到我想要的结果：

state.selectAll("line")
     .data(function(d){
         return d.amount;
     })
     .enter().append("line")
     .attr("x1", 0)
     .attr("y1", function(d){                            
        return Math.min(y(d.y1), y(d.y0));
      })
      .attr("x2", width)
      .attr("y2", function(d){
         return Math.min(y(d.y1), y(d.y0));
      })
      .attr("stroke-width", 1)
      .attr("stroke", "black")
      .attr("stroke-dasharray", "5,5");

但它在每个堆栈的顶部显示一条线，而我想要在每个柱顶部的线。我理解为什么我的代码为每个堆栈添加一行，但我无法弄清楚d3是否允许我轻松地执行此操作。

如何迭代每个条形图并在这些条形图的顶部添加一条线而不是迭代数据并在每个堆叠的顶部添加一条线？

我尝试使用jQuery但无法让它工作..

请注意，该行必须跨越整个图表（从x轴上的x（0）开始，然后变为无限）

价值1000字的图片：

Answer 1

您应该根据数据绘制行。这就是D3的全部要点（而且它通常更快）。

我不确定你是如何绘制图表的，问题中没有相关的代码，但是...

如果你能够显示单个堆栈（我假设你想要在堆栈顶部显示行，这是矩形的集合），那么你应该没有问题在它们上面显示行。

不看你的数据，我只能猜测......但这是基本算法：

1. 迭代堆栈数
2. 计算每个堆栈中各个元素的值的总和
3. 在这些总和上绘制y个值的行（使用您的图表缩放yScale）