文章/答案/技术大牛

发布

社区首页 >问答首页 >D3工具提示+ Mouseover

问D3工具提示+ Mouseover
EN

Stack Overflow用户

提问于 2020-05-05 03:33:52

回答 1查看 95关注 0票数 1

我试图在D3中的刷工具中使用mouseover事件时应用tooptip。我弄明白了为什么它不起作用，解决方案是使用自定义的助手函数。

因此，我正在研究从googling中获得的帮助函数的意义。同时，我遇到了一个我无法忍受的代码，那就是函数链接(我猜想)

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

   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'，函数())

这意味着当'mouseover‘发生时，调用定义的函数。

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

完整的代码附后如下。

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

提前谢谢你。

javascript

d3.js

data-visualization

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-05-05 04:42:34

来自D3文档：

为指定的事件类型名向每个选定元素添加或移除侦听器。类型名是字符串事件类型，例如单击、鼠标切换或提交；浏览器支持的任何DOM事件类型都可以使用。该类型可以可选地后面跟着句点(.)和一个名称；可选名称允许注册多个回调以接收相同类型的事件，如click.foo和click.bar。若要指定多个类型名，请使用空格，如输入更改或click.foo click.bar。

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

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

但是您不需要添加另一个事件来解决您的问题。代码似乎使用不带点(.)的事件名工作。在这个分叉的代码笔中

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61605313

复制

相似问题

问D3工具提示+ Mouseover
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问D3工具提示+ MouseoverEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问D3工具提示+ Mouseover
EN