Display linechart x y data points on mouseover

[Jojo Paderes]

I'm trying to figure out how to display the data x,y points of a linechart with a mouseover event, somewhat similar to this example, http://bl.ocks.org/benjchristensen/2657838. You can check out the jsfiddle code that I wrote for this sample, http://jsfiddle.net/SFPns/15/

For sure there's something wrong with how the code is implemented, I'm pretty much new to using d3.js and SVG in general. For example the console.log does not show up when hovering the mouse over the blue line inside the chart. It does show up when hovering the mouse on the horizontal grid lines, but that's not what I want to happen.

[Nick Zhu]

You are not selecting the right elements, try this:

chart.selectAll('path.line').on("mouseover", function(d) {

        console.log(d);

});

[Jojo Paderes]

Thanks Nick, it works now!

I was able to figure out also how to get the data associated with the x and y coordinates of the plotted line inside the chart:

chart.selectAll('path.line').on("mouseover", function(d) {

    // Get the x y coordinates on mouse over
    console.log('event x', d3.event.x);
    console.log('event y', d3.event.y);
   
     // Get the corresponding data associated with the x y coordinates
     console.log('invert x', chart.x().invert(d3.event.x));
     console.log('invert y', chart.y().invert(d3.event.y));
    
    // vice-versa
    var linearX = chart.x();
    var linearY = chart.y();
    console.log('linear x', linearX(chart.x().invert(d3.event.x)));
    console.log('linear y', linearY(chart.y().invert(d3.event.y)));
});

[Nick Zhu]

Nice =)