javascript - d3 get element or object under current mousepointer? -
how can object (for example node, edge, path or whatever) under mouse in d3?
i want pass mouse on part of svg , console.log
element.
d3 doesn't have native method this. however, can combine d3.mouse()
document.elementfrompoint()
in mousemove
event:
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>
Comments
Post a Comment