d3.js多系列折线图提示问题

Question

我有一个提示框的问题，关于这个链接的示例： D3.JS: Multiseries line chart with mouseover tooltip 在这个示例中，提示框仅显示 y 轴上的华氏度数数据。但在我的项目中，我还想看到未在 x 和 y 轴上显示的数据。

在这个示例中，我根据上面链接中的代码，在第84行进行了更改来生成摄氏度（°C）。如何在单个提示框中同时显示华氏度和摄氏度？[请参见 fiddle][2]https://jsfiddle.net/xn1sLbf4/3/ 在这里，我只是尝试插入一列数据。在我的情况下，“摄氏度”不是我可以从 y 轴上的数据计算出来的东西。它可能是部门名称、ID 等。 有人知道如何做到这一点吗？任何帮助都将不胜感激！

- user6030945

Answer 1

工具提示的文本在第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");

- meetamit

---

感谢您的回复。我想我的例子不是很好。在这里，我只是试图插入一列数据。在我的情况下，“摄氏度”不是我可以从y轴上的数据计算出来的东西。它可能是部门名称、ID等。 - user6030945

@user6030945 这个答案仍然适用。你需要从存储celsius的地方获取额外的数据（假设它已经存储在客户端的变量中，而不是服务器上）。如何做这取决于你的具体情况。但请注意，你可以访问d（尝试在第250行插入console.log(d)），它可能已经保存了你要访问的数据。如果没有，也许你可以将数据挂在d上（通过newCities），以便你可以轻松地访问它。 - meetamit

我将第254行改为t.append('tspan').attr('x', '0').attr('y', '0.5em').text(d.values[i].y1.toFixed(2) + '°C')，但当鼠标移动时，摄氏度并没有改变。我认为d.values后面的[i]不正确。我不知道如何访问值中的y1。实际上，我的数据结构与newCities完全相同。对于这个简单的问题，非常感谢您的帮助！ - user6030945

请使用上面派生的 idx 替换 i，即 @user6030945。然后输出 d.values[idx].y1 的值到控制台。 - meetamit