Question

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

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

任何有助于解决此问题的帮助都将受到高度赞赏。

Image showing d3 issue

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

Answer 1

（从评论部分移动）

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

在updateChart函数中，由circle类选择：

// 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类并将其替换为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类与circle--highlight一起添加如下：

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

或者在updateChart中更改您的选择，如下所示：

svg.selectAll('circle')

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

希望这有帮助！祝你好运！

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

1 个答案: