draw horizontal lines for bars in nvd3 multi bar chart

问题

I want to draw 2 horizontal lines for each of the bars in this nvd3 multibar chart

Here is the fiddle

I have few queries

1. Why is yValueScale(0) not starting from 0 of the plot
2. How do I start drawing the lines from where the bar starts? The xValueScale("A") does not start from the start of the bar of A
3. How do I get to know the width of the bar to draw the line of length equal to the bar width

回答1:

You are appending the line to the wrong "container". The svg variable is the entire svg container, nvd3's drawing container, though, is the g element:

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

So, use:

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));

Updated fiddle.

来源：https://stackoverflow.com/questions/40620576/draw-horizontal-lines-for-bars-in-nvd3-multi-bar-chart