带有图例的多行图表的工具提示单击d3.js

Question

我正在尝试在Mark's answer in this post和this example之后的多个折线图表上添加工具提示。这是我的JS箱https://jsbin.com/fexami/edit?html,js,output#J:L131

我对此图表的设计是..

初始化图表时，仅显示纯色线条并隐藏虚线。当点击右侧的A2和B2时，虚线可以显示或隐藏。

我试图在虚线上添加工具提示，但是当显示虚线时它们不会显示。我通过添加类mouse-over-effects2（第133-223行）创建了虚线的工具提示。实际上，从第225行到第315行（实线和工具提示的代码）的代码中复制了第133到223行（代码为虚线＆＃39;工具提示）的所有代码，只更改了一些名称。从浏览器中的inspect元素看，它看起来像是288-315的代码行覆盖了196-223。

第二个问题是..如何在工具提示中插入＆＃34;状态“以使工具提示同时显示”y“和状态的值。我试图在第177行之后添加文本，但它不起作用。 这是我的updated jsbins

有没有人有想法修复它？非常感谢！

更新

请忽略第一个问题。我刚修好了。但仍然不知道如何解决第二个问题。 有人可以帮忙吗？非常感谢！

Answer 1

是 - 更改

var lines = document.getElementsByClassName('line1');

到

var lines = document.getElementsByClassName('line2');

并且工具提示将显示在虚线上。