Geek asks and answers

NVD3.js Get data point screen position in SVG diagram

I am using the nvd3.js model with a view finder for a project. There are settings that I need to add to this example - for example, different types of annotations at the top of the graph.

spec

There are several ways I can handle this:

1. I could expand the nvd3 diagram models to create one that does what I need (at the moment this seems like a lot of work)

2. I can find the right interfaces in existing nvd3 diagram models and write my own d3 material for creating annotations (it seemed easier, and so I went along this route)

I figured out most of what I need, except how to get the screen position of the svg chart for the value from my xScale (d3.linear.scale ()). Once I have the correct screen position in the nvd3 diagram, I can overlay the comments in the right places.

Question: Does anyone know if there is an interface in nvd3 charts to calculate the screen position of a chart from xScale value? If there is no simple interface, how can I solve this problem?

thank

UPDATE: It looks like I got all the right information to start with Lars comment. But that didn’t make sense, because it seems that there is an error installing xAxis with dates like this:

 chart.xAxis
  .tickFormat(function(d) { return d3.time.format('%Y-%m-%d')(new Date(d)); });

When you try to get xAxis.scale (), you get the date instead of the zoom function. So it was not obvious.

+2
2

xAxis.scale(). , , .

0

Lars:

xAxis :

chart.xAxis
  .tickValues([
    Date.parse('08/24/14'),
    Date.parse('08/30/14'),
    // parsed dates..
  ])
  .tickFormat(function(d) {
    return d3.time.format('%x')(new Date(d))
  });

, , ( ), x , :

chart.xScale()(chart.x()({ x: Date.parse('11/01/14') }))

, -. .

0

More articles:


All Articles