d3在其他路径下的路径上触发鼠标悬停？

Question

我有this chart。

如你所见，我插入了两条路径。

圈子上有鼠标悬停监听器。

现在的问题是，一个path覆盖另一个和属于它的圈子，并且当悬停在底层圈子时不会触发事件。

这是我的意思：

我画出这样的线条和圆圈：

//draw line
let valueline = d3.line()
  .x(function(d) { return x(d.date); })
  .y(function(d) { return ys[count](d.val); });

let chart = chartBody.append("g")
  .attr("class", `charts chart-${count}`)
  .append("path")
    .attr("class", `line-${count} line`)
    .attr("d", valueline(data.samples));

//get dots for circle values
let node = chartBody.selectAll("dot")
                .data(data.samples)
                .enter()
                .append("g");

//add circle
node.append("circle")
  .attr("class", `circle-${count}`)
  .attr("cx", function(d) {return x(d.date); })
  .attr("cy", function(d) { return ys[count](d.val); })
  .attr("r", 8)
  .on("mouseover", showHideDetails)
  .on("mouseout", showHideDetails);

有没有办法在基础圈子上触发事件，还是我必须使用除path标签以外的其他内容？

非常感谢帮助。

Answer 1

执行此操作的一种方法是分别对路径和圆元素进行分组。

let chartBody = svg.append("g")
  .attr("class", "chart-body")
  .attr("clip-path", "url(#clip)")
  //.call(zoom)

let rect = chartBody.append('svg:rect')
  .attr('id', 'rect')
  .attr('width', width)
  .attr('height', height)
  .attr('fill', 'white');

// create group for path
let chartPathContainer = chartBody.append('g')
    .attr('class', 'chart-path-container');

// create group for circles after path so all circles are not covered by path
let chartCircleContainer = chartBody.append('g')
    .attr('class', 'chart-circle-container');

然后在绘制路径和点时，使用它们各自的组作为容器，而不是将它们附加到chartBody。

  let chart = chartPathContainer.append("g")
    .attr("class", `charts chart-${count}`)
    .attr("data-axis", count)
    .append("path")
    .attr("class", `line-${count} line`)
    .attr("d", valueline(data.samples))
    .attr("data-axis", count)
    .attr("data-inactive", false);
  //.on("mouseover", showDetails)
  //.on("mouseout", hideDetails);

  //get dots for circle values
  let node = chartCircleContainer.selectAll("dot")
    .data(data.samples)
    .enter()
    .append("g");

确保没有相互重叠的圆圈/圆点。