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

Question

我有this chart。

正如你所看到的，我插入了两条路径。

在圈子里有我的mouseover监听器。

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

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