CODEWITHSUNDEEP
javascriptanimationd3.jsgeometry
Glen Mongaya
Glen Mongaya

Reputation: 151

d3.js Animation Follow Circles on Mouse Move

I'm using d3.js library and I'm having a problem implementing what the client needs.

Here's client request they want to "black circles to "follow" the mouse when you hover over it.

I don't know if d3.js library has this kind feature I can only see, on mouse drag.

I've added my sample code in JSFiddle see below:

node.on("mousemove", function(){
    var coords = d3.mouse(this);
    //node.attr('transform', 'translate(' + coords[0] + ',' + coords[1] + ')';
    nodes.call(force.drag); 
});

jsFiddle : https://jsfiddle.net/glenmongaya/4pjaeko3/5/

Thanks for you help.

Upvotes: 0

Views: 422

Answers (1)

Mark
Mark

Reputation: 108512

You want a mouse-over to behave like a drag?

node.on("mousemove", function(d){
    d3.event.stopPropagation(); // stop the default event handling
    d.fixed = true; // fix the moused over node
    var coords = d3.mouse(this.parentNode); // get mouse position
    d.px = coords[0]; d.py = coords[1]; // set position
    force.resume(); // resume layout
});

Updated fiddle.

Upvotes: 1

Related Questions