Fügen Sie horizontales Fadenkreuz zu d3.js Diagramm hinzu

Question

Ich bin erfolgreich, Fadenkreuz in D3.js Diagramm zu bekommen, aber Problem ist, ich bekomme nur vertikale Linie, wie füge ich Code für horizontale Linie hinzu? Image of chart

JSFiddle code Diagramm Plotten nicht in JSFiddle

Grundsätzlich Code vertikale Linie Fadenkreuz hinzufügen, wie unten: -

var vertical = d3.select("body") 
     .append("div") 
     .attr("class", "remove") 
     .style("position", "absolute") 
     .style("z-index", "19") 
     .style("width", "1px") 
     .style("height", "450px") 
     .style("top", "47px") 
     .style("bottom", "1px") 
     .style("left", "8px") 
     .style("background", "#000"); 

Kann ich horizontal Fadenkreuz als auch gleiche Weise hinzufügen?

P.S. wollte auch eine Möglichkeit, diese vertikale Linie nur im Diagrammbereich zu halten, aber sie kommt im ganzen Körper, d. h. leerer Bereich neben dem Diagramm in rechts und links.

Answer 1

Ihr Ansatz ist zu kompliziert. Das ist einfacher:

Erstellen Sie zunächst ein transparentes Rechteck die Mausbewegungen zu erhalten:

var transpRect = svg.append("rect") 
    .attr("x", 0) 
    .attr("y", 0) 
    .attr("width", width) 
    .attr("height", height) 
    .attr("fill", "white") 
    .attr("opacity", 0); 

Erstellen Sie dann die Linien:

var verticalLine = svg.append("line") 
    .attr("opacity", 0) 
    .attr("y1", 0) 
    .attr("y2", height) 
    .attr("stroke", "black") 
    .attr("stroke-width", 1) 
    .attr("pointer-events", "none"); 

var horizontalLine = svg.append("line") 
    .attr("opacity", 0) 
    .attr("x1", 0) 
    .attr("x2", width) 
    .attr("stroke", "black") 
    .attr("stroke-width", 1) 
    .attr("pointer-events", "none"); 

Schließlich positionieren die Linien auf mousemove:

transpRect.on("mousemove", function(){ 
    mouse = d3.mouse(this); 
    mousex = mouse[0]; 
    mousey = mouse[1]; 
    verticalLine.attr("x1", mousex).attr("x2", mousex).attr("opacity", 1); 
    horizontalLine.attr("y1", mousey).attr("y2", mousey).attr("opacity", 1) 
}).on("mouseout", function(){ 
    verticalLine.attr("opacity", 0); 
    horizontalLine.attr("opacity", 0); 
}); 

Hier ist Ihre Geige: https://jsfiddle.net/xrf1ro1a/

PS: Um zu vermeiden, Ihre Tooltips zu töten, legte ich die mousemove sowohl auf das Rechteck und auf der Svg auch, was die unerwünschte Wirkung hat, die Linien außerhalb des Diagrammbereichs gehen. Um dies zu vermeiden, setzen Sie pointer-events = none auf die Elemente außerhalb des Diagrammbereichs.