在 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。