简体   繁体   English

d3.js动画跟随鼠标移动的圆圈

[英]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. 我正在使用d3.js库,但是在实现客户端所需内容时遇到了问题。

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. 我不知道d3.js库是否具有这种功能,我只能通过鼠标拖动才能看到。

I've added my sample code in JSFiddle see below: 我在JSFiddle中添加了示例代码,如下所示:

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/ jsFiddle: https ://jsfiddle.net/glenmongaya/4pjaeko3/5/

Thanks for you help. 感谢您的帮助。

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 . 更新小提琴

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM