Search code examples
javascriptd3.jsnvd3.jsstacked-area-chart

Capture XAxis value NVD3 Stacked Area Chart

I'm having trouble with capturing some data on the StackedAreaChart in NVD3.

I'm able to successfully intercept the click event using this answer: NVD3 Stacked Area Chart

However, I need to go one step deeper. Now that I've intercepted the event, I'm getting back an object that looks like this: 

{
 point: {key:"A Place", values:[], seriesIndex: 1},
 pos: [479, 283],
 series: "A Place", 
 seriesIndex: 1 
}

The object's pos array looks the most promising- the first element in the array is obviously the x coordinate with the second element being the y coordinate.

I'm trying to pipe this number into the same function that generates the x-axis values in order to give me the data point on the x-axis I'm looking for. However, I haven't had any luck and my desk is starting to have a bow to it where I've been repeatedly slamming my head.

Anyone have any insight on how I can essentially walk backwards and pipe the coordinates I'm getting back into the chart functions available in d3 to get the x-value I so deisre?

Solution

  • To convert a coordinate back from screen coordinates into the input, you need to use the scale that transformed it in the first place.

    You can access the scale through the axis component, and then can call invert on the coordinate.

    Here's an example:

    var xDataPoint = chart.xAxis.scale().invert(xScreenCoord);