Две точки подсказки на одном пути в линейной диаграмме d3.js

Question

Я сделал эту простую линейную диаграмму в d3, но также показывая данные всплывающей подсказки для мыши, я также хотел бы отобразить данные, для которых синяя пунктирная строка всплывающей подсказки пересекается с трактом передачи данных в первом экземпляре.

Для intsance по ссылке ниже, если мышка наводится на 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;}) 
} 

При необходимости, вы можете улучшить производительность функции monthsContainingCPI, используя более сложную структуру данных, как interval tree, для хранения и доступа к Интервалы CPI.