D3.js多系列折线图工具提示问题

d3.js multiseries line chart tooltip issue

本文关键字：工具提示 问题 折线图 系列 js D3      更新时间：2023-09-26

我有一个关于此链接中的示例的工具提示问题 D3.JS：带鼠标悬停工具提示的多系列折线图 在此示例中，工具提示仅显示 y 轴上华氏度的数据。但是在我的项目中，我还想查看未显示在 x 轴和 y 轴上的数据。

在此示例中，我根据上面链接中的代码对第 84 行进行了更改以生成摄氏度 （°C）。如何让工具提示在单个工具提示中同时显示华氏度和摄氏度？ [see fiddle][2] https://jsfiddle.net/xn1sLbf4/3/在这里，我只是尝试插入一列数据。就我而言，"摄氏度"不是我可以根据 y 轴上的数据计算出来的东西。它可能是部门名称，ID等。

有人知道如何做到这一点吗？任何帮助不胜感激！

工具提示的文本设置在第 250-251 行：

d3.select(this).select('text')
  .text(y.invert(pos.y).toFixed(2));

因此，无论您传递到 .text() 方法中的任何内容，都会显示这些工具提示。要显示两个温度单位，您可以将该代码修改为类似

var fahrenheit = y.invert(pos.y);
var celsius = (fahrenheit - 32) * 5/9;
d3.select(this).select('text')
  .text(fahrenheit.toFixed(1) + "F / " + celsius.toFixed(1) + "c");
相关文章：