D3 工具提示 + 鼠標懸停

Question

當鼠標懸停事件發生在D3中的brushtool時，我嘗試應用toptip。 我弄清楚了為什么它沒有成功，解決方案是使用定制的助手 function。

因此，我正在研究我從谷歌搜索得到的助手 function 的含義。 與此同時，我遇到了一個我無法理解的代碼，即 function 鏈接（我假設）

這段代碼是什么意思？ 它是如何工作的？

   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('鼠標懸停', function())

這意味着當“鼠標懸停”發生時，調用定義的 function。

但是“mouseover.tooltip”是什么意思？

完整代碼如下。

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

先感謝您。

Answer 1

來自 D3 文檔：

為指定事件類型名稱的每個選定元素添加或刪除偵聽器。 typenames為字符串事件類型，如click、mouseover、submit等； 可以使用瀏覽器支持的任何 DOM 事件類型。 類型可以選擇后跟句點 (.) 和名稱； 可選名稱允許注冊多個回調來接收相同類型的事件，例如 click.foo 和 click.bar。 要指定多個類型名，請使用分隔類型名
空格，例如輸入更改或 click.foo click.bar。

selection.on('mouseover', function())替換事件處理程序

selection.on('mouseover.name', function())添加另一個事件處理程序

但是您不需要添加另一個事件來解決您的問題。 該代碼似乎可以在這個分叉的代碼筆中使用沒有點（。）的事件名稱