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"); 

只要確保沒有相互重疊的圓/圓點。