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

D3.js Fisheye.js strange mousemove behavior

本文关键字：js 移动 鼠标 Fisheeye D3      更新时间：2023-09-26

我正试图在大型Tilfold Reingold图（约4000个对象）中使用Fisheye.js效果。我想要的效果就是这个例子。

我一定是错误地使用了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; });
});

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

我摆弄着你的小提琴。我注意到，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/

@Mark-感谢您提供此文章的链接

@彼得-谢谢你的文字标签部分。

我设法把两者结合起来。

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

相关文章：