D3 工具提示 + 鼠标悬停

Question

当鼠标悬停事件发生在 D3 中的画笔工具时，我尝试应用 tooptip。 我想通了为什么它没有解决这个问题的解决方案是使用定制的助手 函数。

因此，我正在研究从谷歌搜索得到的辅助函数的含义。 与此同时，我遇到了一个我无法理解的代码，那就是函数链接（我假设）

这段代码是什么意思？它是如何工作的？

   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.tooltip”是什么意思？

完整代码如下。

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

提前谢谢你。

Answer 1

来自 D3 文档：

为指定的每个选定元素添加或删除侦听器 事件类型名称。 typenames 为字符串事件类型，如 单击、鼠标悬停或提交；您支持的任何 DOM 事件类型 可以使用浏览器。类型可以可选地后跟一个句点 (.) 和一个名字；可选名称允许多个回调 注册以接收相同类型的事件，例如 click.foo 和 点击栏。要指定多个类型名，请使用
分隔类型名 空格，比如输入变化或者click.foo click.bar。

selection.on('mouseover', function()) 替换事件处理程序

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

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