D3强制布局中的工具提示交互

Question

我正在使用D3库在JavaScript中创建强制布局。当我将鼠标悬停在节点上时，将显示一个工具提示，该提示本质上是一个div元素。这是到目前为止我拥有的代码示例-

var nodes = svg.selectAll('circle')
                    .data(dataset.nodes)
                    .enter()
                    .append('circle')
                    .attr('class', 'circle')
                    .attr('r', 12)
                    .style('fill', '#f40f0f')   
                    .call(force.drag)
                    .on('mouseover', function(d){
                        var xpos = parseFloat(d3.select(this).attr('cx')) + 10;
                        var ypos = parseFloat(d3.select(this).attr('cy')) + 10;

                        var toolBox = d3.select('#tooltip')

                        toolBox.style('left', xpos + 'px')
                            .style('top', ypos + 'px')
                            .select('#Name')
                            .text(d.id)

                        toolBox.select('#MW')
                            .text(d.MW)

                        toolBox.select('#producer')
                            .text(d.producer)

                        toolBox.classed('hidden', false)
                    })

                    d3.select('#tooltip').on('mouseleave', function(){
                        d3.select(this).classed('hidden', true)
                    });

目前，如果我在节点上移动，则会显示工具提示，并且如果我从那里在工具提示上移动，然后再离开工具提示，则该工具提示将被隐藏。但是，如果移过某个节点然后又不移开该工具提示而将其移开，则它只会停留在该位置。在节点上添加“ mouseout”功能会阻止我浏览工具提示。关于如何规避此事的任何想法？