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())添加另一个事件处理程序

但是您不需要添加另一个事件来解决您的问题。 该代码似乎可以在这个分叉的代码笔中使用没有点（。）的事件名称