CODEWITHSUNDEEP
javascriptd3.jssvg
CommonSenseCode
CommonSenseCode

Reputation: 25418

d3 get element or object under current mousepointer?

How can I get the object (for example a node, edge, path or whatever) that is currently under the mouse in d3?

I want to pass mouse over any part of svg and console.log the element.

Upvotes: 4

Views: 4142

Answers (2)

Gerardo Furtado
Gerardo Furtado

Reputation: 102219

D3 doesn't have a native method for this. However, you can combine d3.mouse() with document.elementFromPoint() in a 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>

Upvotes: 5

CommonSenseCode
CommonSenseCode

Reputation: 25418

Didn't need d3 for this can be done with js and/or jQuery: 

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

Upvotes: -3

Related Questions