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

Question

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

圆圈上有鼠标悬停侦听器。

现在的问题是，一个 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");

只要确保没有 circles/dots 相互重叠即可。

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

d3 trigger mouseover on path underlying other path?

javascript

mouseover

d3.js

svg-path