D3 / JavaScript найти ближайший элемент с позиции мыши - PullRequest
Новая
       26

D3 / JavaScript найти ближайший элемент с позиции мыши

0 голосов
/ 04 ноября 2019

Я пытаюсь показать ближайшую точку данных и ее текст, когда вы наводите курсор мыши на элемент пути (в примере розового цвета) с помощью D3 / Javascript.

JS Fiddle: https://jsfiddle.net/qkcsrt7p/

Я попытался найти примеры, но у меня нет ничего, что могло бы дать мне ближайшую точку данных относительно положения мыши. Кто-нибудь пробовал подобный функционал раньше?

Код пока: 

       d3.selectAll("g text.label")
        .on('mouseover', function (d) {
            tooltip.transition().duration(200)
                .style('opacity', .9)
            var toolTipText = "<span>" + this.textContent + "</span>";
            tooltip.html(toolTipText)
                .style('left', (d3.event.pageX - 35) + 'px')
                .style('top', (d3.event.pageY - 30) + 'px');
        })
        .on('mouseout', function (d) {
            tooltip.transition().duration(200)
                .style('opacity', 0);
            tooltip.html("");
        })

        d3.selectAll("path")
        .on('mouseover', function (d) {
            var elements = document.elementsFromPoint(d3.event.pageX, d3.event.pageY);
            console.log(elements);
        })
        .on('mouseout', function (d) {

        })
...