Подсказка D3 + наведение мыши - PullRequest
Новая
       6

Подсказка D3 + наведение мыши

1 голос
/ 05 мая 2020

Я попытался применить tooptip при наведении курсора мыши на инструмент кисти в D3. Я выяснил, почему это не сработало, и решением для этого является использование настраиваемой вспомогательной функции.

Соответственно, я изучаю значение вспомогательной функции, которую получил в результате поиска в Google. Тем временем я наткнулся на код, который не могу понять, это цепочка функций (я полагаю)

Что означает этот код? и как это работает? 

   function tooltip(selection){


    selection.on('mouseover.tooltip', function(pD, pI){
        // Clean up lost tooltips
        d3.select('body').selectAll('div.tooltip').remove();
        // Append tooltip
        tooltipDiv = d3.select('body')
                       .append('div')
                       .attr('class', 'tooltip')
        var absoluteMousePos = d3.mouse(bodyNode);
        tooltipDiv.style({
            left: (absoluteMousePos[0] + 10)+'px',
            top: (absoluteMousePos[1] - 40)+'px',
            'background-color': '#d8d5e4',
            width: '65px',
            height: '30px',
            padding: '5px',
            position: 'absolute',
            'z-index': 1001,
            'box-shadow': '0 1px 2px 0 #656565'
        });

в частности, я не могу понять значение

selection.on ('mouseover.tooltip')

Я понимаю

selection.on ('mouseover', function ())

что означает, что когда происходит 'mouseover', вызывать определенную функцию.

Но что делает ' mouseover.tooltip 'означает?

Полный код прилагается, как показано ниже.

https://codepen.io/jotnajoa/pen/PoPEppN

Заранее спасибо.

1 Ответ

2 голосов
/ 05 мая 2020

Из документации D3:

Добавляет или удаляет прослушиватель для каждого выбранного элемента для указанных типов событий. Typenames - это строковый тип события, например щелчок, наведение курсора или отправка; может использоваться любой тип событий DOM, поддерживаемый вашим браузером. За типом по желанию может следовать точка (.) И имя; необязательное имя позволяет регистрировать несколько обратных вызовов для получения событий одного типа, таких как click.foo и click.bar. Чтобы указать несколько имен типов, разделите имена типов пробелами
, например, input change или click.foo click.bar.

selection.on('mouseover', function()) заменяет обработчик событий

selection.on('mouseover.name', function()) добавляет другой обработчик событий

Но вам не нужно добавлять другое событие для решения вашей проблемы. Код, кажется, работает с именем события без точки (.) В этом разветвленном перо кода

...