多行图表的工具提示图例点击d3.js [英] Tooltips for multiple lines chart with legend click d3.js

问题描述

我正在尝试在 Mark在此信息中的回答和此示例。这是我的JS箱 https://jsbin.com/fexami/edit？ html，js，output＃J：L131

这个图表的设计是..

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

我试图在虚线上添加工具提示，但是当虚线显示时它们不会显示。我通过添加类 mouse-over-effects2 （第133 - 223行）为虚线创建了工具提示。实际上，所有代码形式行133到223（用于虚线工具提示的代码）被从代码从行225复制到315（用于实线的工具提示的代码），并且仅改变一些名称。从浏览器中检查元素，它看起来像代码行从288-315覆盖196-223。

第二个问题是如何插入状态工具提示使工具提示显示y和状态的值我试图添加文本后177行，但它不工作
这里是我的 updated jsbins

已更新

请忽略第一个问题，不知道如何解决第二个问题
任何人都可以帮助？非常感谢。

解决方案

更改

  var lines = document.getElementsByClassName（'line1'）; 
  pre> 
 
 
到
  var lines = document.getElementsByClassName '）; 
  
，工具提示将显示在虚线上。
 
I am trying to add tooltips on multiple lines chart following Mark's answer in this post and this example . Here is my JS bins https://jsbin.com/fexami/edit?html,js,output#J:L131

My design for this chart is..

When the chart is initialized, only the lines with solid color show up and the dashed lines are hidden. Dashed lines can show or hide when click A2 and B2 on the right side. 

I was trying to add tooltips on the dashed lines but they do not show up when dashed lines are showing. I created the tooltips for dashed lines by adding class mouse-over-effects2(line 133 - 223). Actually, all the code form line 133 to 223(code for dashed lines' tooltips) is copied from the code from line 225 to 315 (code for solid lines' tooltips) and just some names are changed. From inspect elements in the browser, it looks like the lines of code from 288-315 overwrite 196-223.

Second question is..How to insert "state" into the tooltips to make the tooltip  show both the value of "y" and state. I was trying to add text after line 177, but it does not work.
Here is my updated jsbins

Does anyone have idea to fix it? Thanks a lot!

Updated

Please ignore the first question. I just fixed it. But still don't know how to solve the second one.
Can anyone help? Thanks a lot!
解决方案
Yes - change
var lines = document.getElementsByClassName('line1');
to
var lines = document.getElementsByClassName('line2');
and the tooltips will display on the dashed lines.

                        
这篇关于多行图表的工具提示图例点击d3.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！