draw horizontal lines for bars in nvd3 multi bar chart

Question

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

Mckale

Answer 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.

Paleoasiatic

Thanks! Can you also help me in obtaining the width of the bar dynamically? – Mckale

@Dinesh, assuming all bars are the same width, it's simply: d3.select("#chart1 .nv-bar").attr("width") – Paleoasiatic

do you have some tutorial for this . (dot) notation - I am not so clear how it is working in the d3.select() – Mckale

@Dinesh, it's a CSS selection. . means class name, # means by id. In the above it's find the element with id of "chart1" and then find it's child with a class of "nv-bar". As always the mozilla docs are excellent. – Paleoasiatic

Thanks, I tried again with the nvd3 discrete bar chart but not able to quite get the exact container in which the drawing is made - jsfiddle.net/dm89/qd36csux/3 – Mckale