D3jS показать информацию о наведении на круг - PullRequest
Новая
       23

D3jS показать информацию о наведении на круг

0 голосов
/ 02 июля 2018

У меня есть линейный график, который добавляет круги на линии для каждой точки данных. При наведении курсора я хотел бы отобразить «Дата» и «Закрыть» точки данных.

Вот это jsfiddle

Вот что я пробовал: 

.on("mouseover", function(d) {      
        svg.transition()        
            .duration(100)      
            .style("opacity", 1);       
        svg .html(d.date + "<br/>"  + d.close)  
            .style("left", (d3.event.pageX) + "px")     
            .style("top", (d3.event.pageY - 28) + "px");    
        })                  
    .on("mouseout", function(d) {       
        svg.transition()        
            .duration(100)      
            .style("opacity", 1);   
    })

Что-то происходит с кодом , но это очень медленно и не показывает "Дата" и "Закрыть" при наведении курсора.

Как сделать так, чтобы «Дата» и «Закрыть» отображались / скрывались для каждой окружности точки данных при наведении курсора?

1 Ответ

0 голосов
/ 03 июля 2018

Я думаю, что лучший способ сделать это - включить d3.tip для вашего решения. Я использую d3.tip.v0.6.3.js.

Сначала вам нужно создать представление всплывающей подсказки в переменной: 

var toolTip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function(d) {
        return "<div style='margin-bottom: -12px; color:"+d.data.color+"'>"+d.name+"</div></br><div style='margin-bottom: -5px'>"+ d.data.label+"</div></br>";
    });

'function (d)' после '.html' возвращает html-часть для всплывающей подсказки, только не забывайте кавычки.

сразу после этой функции вы должны добавить: 

svg.call(toolTip);

таким образом, ваш svg будет знать эту подсказку var, которую вы создали, вы можете создать эту var сразу после svg.

Последняя часть будет связана с подключением всплывающей подсказки к 2 событиям на элементах d3: mouseover & mouseout: 

.on("mouseover", toolTip.show )
.on("mouseout", toolTip.hide);

Надеюсь, это поможет

...