NVD3.js获取SVG图表中的数据点的屏幕位置 [英] NVD3.js Get Data Point's Screen Position Within SVG Chart

问题描述

我正在使用nvd3.js 与焦点图表（查找器）模型为一个项目。我需要添加到此示例中的自定义项，例如在图表顶部的不同类型的注释叠加层。

I'm using the nvd3.js line with focus chart ( view finder ) model for a project. There are customizations that i need to add to this example -- such as different types of annotation overlays on top of the graph.

有几种方法可以解决这个问题：

There's a couple ways i can see tackling this:

1。我可以扩展nvd3图表模型，创建一个我需要的东西（这看起来很多工作）

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

2。我可以在现有的nvd3图表模型中找到正确的接口，并编写我自己的d3东西创建注释（这看起来更容易，所以我走这条路线）

2. I can find the right interfaces in the existing nvd3 chart models and write my own d3 stuff to create annotations ( this seemed easier, and so i went down this route )

我已经找出了我需要的大部分内容，除了如何从我的xScale（d3.linear.scale（））的值获得图表的svg屏幕位置。一旦我在nvd3图表中有正确的屏幕位置，我就可以使我的注释覆盖在正确的位置。

I've figured out most of what i need except how to get the chart's svg screen position for a value from my xScale ( d3.linear.scale() ). Once i have the correct screen position within the nvd3 chart i can make my annotation overlay in the correct spots.

问题：
有人知道如果在nvd3图表中有一个接口从xScale值计算图表的屏幕位置？如果没有简单的界面，我该如何解决这个问题？

Question: Does anyone know if there's an interface in nvd3 charts to calculate the chart's screen position from an xScale value? If there's no easy interface, how could i solve this problem?

谢谢

UPDATE： / strong>看起来我有所有正确的信息开始感谢Lars的评论。但是这没有意义，因为设置xAxis时有这样的日期似乎有一个错误：

UPDATE: It looks like i had all the correct information to begin with thanks to Lars' comment. But it wasn't making sense since there seems to be a bug when setting xAxis with dates like this:

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

当您尝试获取xAxis.scale（）时，功能。

When you try to get the xAxis.scale(), you get a date back instead of the scale function. So it wasn't obvious.

推荐答案

您应该可以通过 xAxis.scale （）。您应该在绘制图形后运行此代码，以确保刻度设置正确。

You should be able to access the scale through xAxis.scale(). You should run this code after the graph has been drawn to make sure that the scale is set up properly.

这篇关于NVD3.js获取SVG图表中的数据点的屏幕位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！