d3 Element oder Objekt unter aktuellen Mauszeiger holen?

Question

Wie kann ich das Objekt (z. B. einen Knoten, eine Kante, einen Pfad oder was auch immer), das derzeit unter der Maus in d3 ist, abrufen?

Ich möchte die Maus über irgendeinen Teil von Svg und console.log das Element übergeben.

Answer 1

D3 hat keine native Methode dafür. Sie können jedoch d3.mouse() mit document.elementFromPoint() in einem mousemove Ereignis verbinden:

var svg = d3.select("svg"); 
 
svg.on("mousemove", function() { 
 
    var mouse = d3.mouse(this); 
 
    var elem = document.elementFromPoint(mouse[0], mouse[1]); 
 
    console.log(elem.tagName) 
 
})

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg height="150" width="500"> 
 
    <rect x="50" y="20" width="150" height="100" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/> 
 
    <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow"/> 
 
    <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white"/> 
 
    <circle cx="350" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
 
    <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:4"/> 
 
</svg>

Answer 2

Brauchte nicht d3 hierfür kann mit js und/oder jQuery erfolgen:

$("body").click(function(event) { 
    console.log("clicked: " + event.target.nodeName, event.target); 
});