我正在尝试在大型Tilfold-Reingold图表中使用Fisheye.js效果(~4000个对象)。我的目标是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; });
});
更新:目的是定位每个节点和相关的描述文本,使其更具可读性。
答案 0 :(得分:0)
我和你的小提琴一起玩。我注意到,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
});
答案 1 :(得分:0)