D3.js Fisheye.js奇怪的mousemove行為

Question

我正在嘗試在一個大的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; });

});

更新：目的是針對每個節點和關聯的描述文本，以使其更具可讀性。

Answer 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/

Answer 2

@Mark-感謝您提供此帖子的鏈接

@ Peter-感謝您的文字標簽部分。

我設法使兩者結合起來工作。

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