d3は、他のパスの下にあるパス上でマウスオーバーをトリガーしますか？

Question

私はthis chartです。

ご覧のとおり、私は2つのパスを挿入しました。

サークルにマウスオーバーリスナーがあります。

ここで問題となるのは、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

これを行う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"); 

お互いに重なる円/点がないことを確認してください。