在小倍数堆积区域图表中使用d3.bisector的工具提示会引发参考错误

时间:2017-11-02 03:24:39

标签: javascript d3.js

我有一个堆积区域图表 - 或者更确切地说,是小倍数的堆积区域图表 - 我正在尝试添加一个显示多个值的工具提示,如此块中所示:https://bl.ocks.org/fabiomainardi/3976176cb36e718a608f 以及这一个:http://bl.ocks.org/wdickerson/64535aff478e8a9fd9d9facccfef8929

据我了解,我想要实现的结果(最类似于第二个块)需要d3.bisect方法,因为1)涉及多个路径/行,2)我最终想要,与工具提示内每个区域的y值一起,显示x轴值(即日期),如此块中所示:http://bl.ocks.org/d3noob/6eb506b129f585ce5c8a。也许在mousover上获得x轴值是另一天的另一个问题;但也许你感觉很慷慨。

对我而言,他们是相关的问题,因为我同样无法调出工具提示的x或y值。

这是我的Plunker http://plnkr.co/edit/ztDPXbLu3dZ6ju4poz84?p=preview

我尝试使用d3.bisect调整大约六到七个不同的示例来显示多个路径/行的工具提示x / y值,但没有成功。我一直在使用的所有其他示例都有一个更简单的数据结构。

在我对其他人的工具提示的各种调整中,我尝试通过以下方式召唤日期和y值:

d.x
d.date
d.dates
arr
data.x
dataset.x
dataset.date
data.x
dataset.x
data.y
d.y
dataset.y
dataset[0].values[1].y
dataset[i].values[j].y
dates.x
date.y
dataset.values.x
data.values.y
d3.max(data.values.y)

可以预见,我会收到很多参考错误。

我设法让一个伪工具提示工作。 这是另一个Plunker https://plnkr.co/edit/XpXQc6ryvpyPeprAPxH4?p=info

但这仅显示完整日期范围的总计,一次只显示一个路径。我的目标是在工具提示中为堆积区域图中的每个路径显示日期和所有相应y轴值,就像我之前引用的第二个块一样。

我如何做到这一点,并且有人可以在分叉的Plunker中为我演示,如何对我的数据集进行必要的引用以获得这样的工具提示?

0 个答案:

没有答案