javascript - 在 nvd3 多条形图中为条形图绘制水平线

Question

我想为这个 nvd3 多条形图表中的每个条形绘制 2 条水平线

这是 fiddle

我有几个问题

1. 为什么 yValueScale(0) 不是从绘图的 0 开始
2. 如何从条形开始的地方开始画线？ xValueScale("A") 不是从 A
的柱开始
3. 如何知道条的宽度以绘制长度等于条宽度的线

Answer 1

您将行附加到错误的“容器”。 svg 变量是整个 svg 容器，nvd3 的绘图容器是 g 元素:

<g class="nvd3 nv-wrap nv-multibar" transform="translate(0,0)">

所以，使用:

var g = d3.select("#chart1 svg .nvd3");
g.append("line")
  .style("stroke", "#FF7F0E")
  .style("stroke-width", "2.5px")
  .attr("x1", xValueScale("A"))
  .attr("y1", yValueScale(yValue))
  .attr("x2", xValueScale("A") + 100)
  .attr("y2", yValueScale(yValue));

已更新 fiddle .