D3.js Fisheye.js 奇怪的鼠标移动行为

Question

我正在尝试使用 Fisheye.js effect in a large Tilfold-Reingold diagram (~4000 objects). The effect I'm aiming for is something like this example。

我一定是错误地使用了 Fisheye.js，因为我的示例似乎并没有影响所需的节点或文本（根本）。

https://jsfiddle.net/Nyquist212/7b7q9ra9/

谁能告诉我哪里做错了？

svg.on("mousemove", function() {

fisheye.focus(d3.mouse(this));

node.each(function(d) { d.fisheye = fisheye(d); })

node.selectAll("circle")
    .attr("cx", function(d) { return d.fisheye.x - d.x; })
    .attr("cy", function(d) { return d.fisheye.y - d.y; })
    .attr("r", function(d) { return d.fisheye.z * 10; });

node.select("text")
    .attr("dx", function(d) { return d.fisheye.x - d.x; })
    .attr("dy", function(d) { return d.fisheye.y - d.y; });

});

更新：目的是针对每个节点和相关的描述文本，使它们更具可读性。

Answer 1

我玩过你的fiddle。我注意到， svg 变量并不是它的名字所暗示的那样。而且我还设法增加了文本的大小。还是有点奇怪，不过我觉得离你的目标更近了。

d3.select("svg").on("mousemove", function() { //here

fisheye.focus(d3.mouse(this));

node.each(function(d) { d.fisheye = fisheye(d); })

node.selectAll("circle")
    .attr("cx", function(d) { return d.fisheye.x - d.x; })
    .attr("cy", function(d) { return d.fisheye.y - d.y; })
    .attr("r", function(d) { return d.fisheye.z * 10; });

node.select("text")
    .attr("dx", function(d) { return d.fisheye.x - d.x; })
    .attr("dy", function(d) { return d.fisheye.y - d.y; })
    .attr("style", function(d){return "font-size :"+d.fisheye.z*10+"px";}); //here

});

https://jsfiddle.net/7b7q9ra9/23/

Answer 2

@Mark - 谢谢你的 link 到 this post

@Peter- 感谢您提供文本标签部分。

我设法将两者结合起来工作。

http://fiddle.jshell.net/Nyquist212/w05nkyry/3/

D3.js Fisheye.js 奇怪的鼠标移动行为

D3.js Fisheye.js strange mousemove behavior

javascript

select

fisheye

d3.js