当鼠标悬停在数据更新上时，D3 圆圈元素仍然存在

Question

我有一个由线路径组成的 D3 时间序列图表，在每个数据点我使用一个附加到线的圆。圆圈有一个鼠标输入事件附加到它，当鼠标移到圆圈上时，它会显示工具提示，其中包含有关该数据点的信息，我还更改了圆圈的 class 以使其看起来突出显示。

我遇到的问题是，当鼠标悬停在圆圈上并且圆圈突出显示并显示工具提示时，同时如果我获得一些新数据并且图表已更新，我的鼠标圆圈即使鼠标从圆圈上移开，结束也不会消失，它显示圆圈挂在中间，没有连接到任何一条线。我附上了显示问题的图表图像。

我们将不胜感激解决此问题的任何帮助。

Image showing d3 issue

这是显示问题的 jsfiddle 代码。尝试将鼠标指向圆圈并等待图表每 5 秒更新一次

Answer 1

（从评论区搬过来）

看看这个：https://jsfiddle.net/xvLgq8mn/

在 updateChart 函数中，您 select 通过 circle class:

// update the circles at each data points
svg.selectAll('.circle') // here you correctly select all with the circle class
      .data(this.props.data)
      .attr('class', 'circle all')
      .transition()
      .duration(500)
      .attr('cx', (d) => { return this.axis.x(d.time);})
      .attr('cy', (d) => { return this.axis.y(d.count);});

但是在这里，在鼠标悬停时，您删除了 circle class 并将其替换为 circle--highlight:

group.selectAll()
    .data(this.props.data)
    .enter().append('circle')
            .attr('class', 'circle all')
            .attr('cx', (d) => { return this.axis.x(d.time);})
            .attr('cy', (d) => { return this.axis.y(d.count);})
            .attr('r', 4)
            .on('mousemove', function(d) {
              // START: Show tooltip
              div.transition()
                .duration(1000)
                .style('opacity', 1);

              div.html('<div class="date--time">'
                + d.time
                + '</div><div class="count">'  + d.count + ' incidents</div>')
                .style('left', (d3.event.pageX) + 'px')
                .style('top', (d3.event.pageY - 70) + 'px');

              d3.select(this)
                .attr('r', 6)
                .attr('class', 'circle--highlight'); // here you change the class from circle all 
              // to just circle--highlight, 
              // so when you are hovering a circle and the chart changes, 
              // the circle you have hovered won't be updated because 
              // it won't be selected due to the class difference

              // END: Show tooltip
            })
            .on('mouseleave', function() {
              // hide tooltip and return the circles to original style
              div.transition()
               .duration(500)
               .style('opacity', 0);

              // set the circle back to normal
              d3.select(this)
                .attr('r', 4)
                .attr('class', 'circle all');
            });

所以一个解决方案是同时添加 circle class 和 circle--highlight，如下所示：

 d3.select(this)
              .attr('r', 6)
              .attr('class', 'circle circle--highlight');

或者像这样在 updateChart 中更改您的 select：

svg.selectAll('circle')

但这需要对您的脚本进行更多调整才能使其按预期工作。

希望对您有所帮助！祝你好运！

当鼠标悬停在数据更新上时，D3 圆圈元素仍然存在

D3 circle element remains when mouse over on data update

onmouseover

mouseenter

d3.js