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

Posted 2023-02-25

【中文标题】D3.js Fisheye.js 奇怪的鼠标移动行为

【英文标题】：D3.js Fisheye.js strange mousemove behavior

【发布时间】：2015-11-17 12:10:18

【问题描述】：

我正在尝试在大型 Tilfold-Reingold 图（约 4000 个对象）中使用 Fisheye.js 效果。我想要的效果类似于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; );

);

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

【问题讨论】：

在您的代码中，当mouse-moves 时，您正在对所有节点进行鱼眼。那么当鼠标移动时，你想要在单个节点上还是全部节点上是什么？？？？也只是节点半径从 2 得到 10。请提供更多信息。

@Hashy 我正在尝试对每个节点和相应的文本标签应用鱼眼失真，以使其更具可读性。

看到这个问题here。必须使鱼眼与放射状布局相得益彰......

【参考方案1】：

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

【参考方案2】：

@Mark - 感谢您提供指向this post 的链接

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

我设法将两者结合起来。

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

【讨论】：

现在真的很酷。不要忘记接受这个答案，以帮助其他人更容易找到正确的解决方案。