d3.js 折线图中一条路径上的两个工具提示点答案

【问题标题】：Two tooltip points on one path in d3.js line chartd3.js 折线图中一条路径上的两个工具提示点
【发布时间】：2015-09-07 22:44:47
【问题描述】：

我在 d3 中制作了这个简单的折线图，但除了显示鼠标悬停的工具提示数据外，我还想显示工具提示的蓝色虚线与第一个数据路径相交的数据实例。

例如在下面的链接中，如果鼠标悬停在 2012 年，则 2005 年的数据将显示在工具提示线和数据路径之间的第一个交点处。

http://bl.ocks.org/anonymous/49f04076adbec7e2c2f9

有什么想法吗？谢谢

【问题讨论】：

标签： html d3.js

【解决方案1】：

在链接的示例中，您可能希望搜索 CPI 间隔包含当前显示的 CPI 值的月份。因此，创建一个此类间隔列表，并引用包含它们的月份，然后在悬停时找到匹配的间隔。

类似这样的东西，例如（未经测试）：

// after loading data
var cpi_intervals = [];
data.forEach(function(d, i) {
  if (i > 0) {
    cpi_intervals.push({
        cpis: d3.extent([data[i-1].cpi, d.cpi]),
        date: d.date
    });
  }
});

...

// function to find months containing specified cpi
function monthsContainingCPI(cpi) {
  return cpi_intervals.filter(function(d) {
    return cpi >= d.cpis[0] && cpi < d.cpis[1];
  }).map(function(d) {return d.date;})
}

如果需要，您可以通过使用更复杂的数据结构（例如 interval tree）来存储和访问 CPI 间隔来提高monthsContainingCPI 函数的性能。

【讨论】：

这是有道理的，我按照建议做了，但没有显示任何内容（控制台中的错误也没有）。那是因为我需要写一些东西来使其他值显示在鼠标悬停上吗？目前它仍然是一套。
是的，这可以让您找到日期，但您可以编写代码以不同的方式显示它。它可能类似于当前使用的 .y3 和 .y4 节点。
感谢无法对此进行测试，因为它不够熟练，无法解决如何修改代码以在鼠标悬停时显示额外的 CPI 值，如果可能的话，任何关于如何编写代码的见解都会有所帮助。已尝试为 cpis 创建第二个焦点，但没有奏效。