CODEWITHSUNDEEP
chartsd3.jsnvd3.js
leonsas
leonsas

Reputation: 4908

Adding a X-value line on nvd3

I'm using a chart similar to the sample linechart example. I want to implement an x-value line on the chart, something similar to this flot examples.

I tried with something like the following, but can't get it to work. Here's the jsFiddle. Any ideas?

   svg.on("mousemove",function(){
        //this is my attempt but clearly its not working
        m1 = d3.mouse(this);
        var line = svg.append("line")
                   .attr("y1",0)
                   .attr("y2",height)
                   .attr("x1", m1[0])
                   .attr("x2",m1[0]);

    });

Upvotes: 0

Views: 607

Answers (1)

Ian H
Ian H

Reputation: 542

I updated your jsFiddle here http://jsfiddle.net/MyGqN/5/

Let's first make a line by adding

 svg.append("line").attr("id","rLine");

After our declaring the svg variable

then change your code to be

svg.on("mousemove",function(){
    m1 = d3.mouse(this);
    svg.selectAll("#rLine")
               .attr("y1",0)
               .attr("y2",height)
               .attr("x1", m1[0])
               .attr("x2",m1[0])
                .attr("stroke","red")
                .attr("stroke-width",2);

});

Upvotes: 1

Related Questions