在悬停时，在D3 v5中将圆圈添加到悬停的圆圈上方

Question

我正在尝试将鼠标悬停在D3中的现有圆上附加一个圆，但是不确定如何获取悬停的圆的坐标并将其添加新圆并在鼠标移出时将其删除。

将鼠标悬停在绿色圆圈上应在其周围显示蓝色圆圈。

Answer 1

简而言之，将绿色圆圈放在g元素中，并将侦听器附加到该元素，这将分别在mouseenter和mouseleave上添加和删除外部圆圈。

我已经将其演示的JSFiddle放在一起：https://jsfiddle.net/df23r1yj/

首先为每个数据元素附加一个g元素（设置pointer-events to all使其触发事件，即使元素没有填充）：

const circleG = svg.append('g')
  .selectAll('g')
  .data(data).enter()
  .append('g')
  .style('pointer-events', 'all')

为每个数据元素添加一个绿色圆圈：

circleG.append('circle')
  .classed('persistentCircle', true)
  .attr('cx', (d) => { return d.x })
  .attr('cy', (d) => { return d.y })
  .attr('r', (d) => { return d.r })
  .style('stroke', 'green')
  .style('fill', 'none')
  .style('fill', 'black')
  .style('fill-opacity', 0)

添加事件侦听器，该事件侦听器追加并删除外部的蓝色圆圈。使用insert而不是传统的append会将外圆放在内圆后面。给外圈一个类-removeableCircle-可以很容易地在mouseleave上删除它。：

circleG
  .on('mouseenter', function () {
    d3.select(this)
      .insert('circle', ':first-child')
      .classed('removeableCircle', true)
      .attr('cx', (d) => { return d.x })
      .attr('cy', (d) => { return d.y })
      .attr('r', (d) => { return d.r * 1.5 })
      .style('stroke', 'blue')
      .style('fill', 'none')
      .style('pointer-events', 'none')
  })
  .on('mouseleave', function () {
    d3.select(this).selectAll('.removeableCircle').remove()
  })

希望这会有所帮助！