рисование линии на линии графа на мыши?

Я строю линейный график с D3.js. Когда Мышки пользователя над графиком, я хотел бы нарисовать вертикальную линию на графике, выделите ее пересечение с графиком линиями, и показать всплывающую подсказку, как этот скриншот:рисование линии на линии графа на мыши?

enter image description here

Я получил часть пути вниз по этой дороге. Вот мой код на JSFiddle: http://jsfiddle.net/BvuBV/1/

Как вы можете видеть, я слушаю события мыши на svg элемент, и линия (вроде) будут правильно отображаться:

// Add mouseover events. 
svg.on("mouseover", function() { 
    console.log('mouseover') 
}).on("mousemove", function() { 
    console.log('mousemove', d3.mouse(this)); 
    var x = d3.mouse(this)[0]; 
    hoverLine.attr("x1", x).attr("x2", x).style("opacity", 1); 
}).on("mouseout", function() { 
    console.log('mouseout'); 
    hoverLine.style("opacity", 1e-6); 
});

Однако есть несколько проблем:

в mouseover и mousemove события, кажется, не стрелять последовательно, когда мышь над элементом SVG, только иногда - я делаю что-то не так?
Я не знаю, как перевести x и y значения, предоставленные d3.mouse(this) обратно в дату и inlet значений, так что я могу сделать нужные круги на графике, и показать нужный всплывающее окно.

Любая помощь очень ценится.

UPDATE: Благодаря помощи @Aegis я решил 1 и часть 2: http://jsfiddle.net/BvuBV/4/

Но я до сих пор не знаю, как подчеркнуть пересечение парения линии с двумя линиями диаграммы, и как для получения значений линий диаграммы в этой точке.

источник

2013-09-18 Richard

Я исследовал то же самое, и я думаю, что я о том, где вы с этой проблемой. Тем не менее, я замечаю одну вещь, которая может помочь вашей диаграмме. Не утруждайте себя бесполезностью через JS. Просто сделайте это в CSS: .hover-line {opacity: 0; } .air-quality: hover .hover-line {opacity: 1; } –

Это может помочь вам получить немного дальше (у меня нет опыта работы с D3 на всех):

По какой-то причине ваши события связаны с путями, а не базовый элемент SVG. Если вы делаете d3.select(".air-quality").on(..), он работает так, как вы ожидали.

источник

2013-09-18 21:53:05 Aegis

Вы совершенно правы в этом, спасибо: http://jsfiddle.net/BvuBV/2/ – Richard

... теперь мне просто нужно выяснить, как добраться от x- и y-координат до другого values ... – Richard

Вы уверены, что для этого нет возможности? Похоже, что эта функция будет встроена. – Aegis

Я знаю, что это уже было отмечено как ответы, но для будущих Googlers, для которых это проявляется в качестве верхнего результата ... Рабочий пример для вертикальной линии при наведении курсора мыши можно найти здесь: http://bl.ocks.org/WillTurman/4631136

Вот соответствующая часть кода для вертикальной линии:

var vertical = d3.select(".chart") 
     .append("div") 
     .attr("class", "remove") 
     .style("position", "absolute") 
     .style("z-index", "19") 
     .style("width", "1px") 
     .style("height", "380px") 
     .style("top", "10px") 
     .style("bottom", "30px") 
     .style("left", "0px") 
     .style("background", "#fff"); 

    d3.select(".chart") 
     .on("mousemove", function(){ 
     mousex = d3.mouse(this); 
     mousex = mousex[0] + 5; 
     vertical.style("left", mousex + "px")}) 
     .on("mouseover", function(){ 
     mousex = d3.mouse(this); 
     mousex = mousex[0] + 5; 
     vertical.style("left", mousex + "px")});

источник

2014-04-07 20:16:52 cheepychappy

рисование линии на линии графа на мыши?

ответ

Смежные вопросы