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

时间:2018-09-05 07:01:35

标签: javascript animation d3.js geometry

我正在使用 d3.js 库,但是在实现客户端所需内容时遇到问题。

这里的客户要求他们将鼠标悬停在鼠标上时要“ 圈以“ 跟随”。

我不知道d3.js库是否具有我只能通过鼠标拖动才能看到的这种功能。

我已在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/

感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

您希望将鼠标悬停在行为上像拖动吗?

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
});

更新了fiddle