Question

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

对于以下链接的初始值，如果鼠标在2012年徘徊，2005年的数据将显示在工具提示行和数据路径的第一个交叉点。

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

有什么想法吗？感谢

Answer 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）来提高monthsContainingCPI函数的性能，以存储和访问CPI间隔。

d3.js折线图

1 个答案: