d3 löst mouseover auf Pfad, der anderen Pfad zugrunde liegt?

Question

Ich habe this chart.

Wie Sie sehen können, habe ich zwei Pfade eingefügt.

Es gibt Mouseover-Listener auf den Kreisen.

Jetzt ist das Problem, dass eine path die andere und die zugehörigen Kreise überlagert, und das Ereignis wird nicht ausgelöst, wenn ein zugrunde liegender Kreis schwebt.

hier der Kreis Ich meine:

Ich zeichne die Linien und Kreise wie folgt aus:

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

Gibt es eine Möglichkeit, die Veranstaltung auf dem darunterliegenden Kreis auszulösen oder ich tun muss etwas anderes als das path Tag verwendet werden?

Hilfe wäre sehr willkommen.

Answer 1

Eine Möglichkeit besteht darin, den Pfad und die Kreise separat zu gruppieren.

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

Dann, wenn Sie den Pfad und Punkte zeichnen, ihre jeweiligen Gruppe als Container verwenden, statt sie in chartBody anhängt.

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

Nur sicherstellen, dass es keine Kreise/Punkte gibt, die sich überlappen.