Fisheye变形插件的怪异行为
Fisheye变形插件的怪异行为
提问于 2014-11-04 18:58:15
嗨，我想用鱼眼变形插件作为d3.js中的力有向图，但是当我想应用这个插件时，图形的行为是很奇怪的。我是d3.js的新手，不擅长计算机图形学。
用小提琴完成样品
var fisheye = d3.fisheye.circular()
.radius(200)
.distortion(2);
// graph - variable which represents whole graph
graph.svg.on("mousemove", function() {
fisheye.focus(d3.mouse(this));
d3.select("svg").selectAll("circle").each(function(d) { d.fisheye = fisheye(d); })
.attr("cx", function(d) { return d.fisheye.x; })
.attr("cy", function(d) { return d.fisheye.y; })
.attr("r", function(d) { return d.fisheye.z * 4.5; });
d3.select("svg").selectAll("line").attr("x1", function(d) { return d.source.fisheye.x; })
.attr("y1", function(d) { return d.source.fisheye.y; })
.attr("x2", function(d) { return d.target.fisheye.x; })
.attr("y2", function(d) { return d.target.fisheye.y; });
});奇怪的行为，我的意思是，图形的节点在鼠标移动后消失(隐藏)。
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-11-13 16:26:32
问题是，您使用代码将cx和cy添加到圆圈中，但是您的圆圈实际上是封闭在transform编辑的nodeElements中的。
因此，将fisheye代码更改为以下代码可以解决这个问题：
graph.svg.on("mousemove", function() {
fisheye.focus(d3.mouse(this));
// Change transform on the .node
d3.select("svg").selectAll(".node")
.each(function(d) { d.fisheye = fisheye({ x: graph.x(d.x), y: graph.y(d.y) }); console.log(d.fisheye, d); })
.attr("transform", function (d) { return "translate(" + d.fisheye.x + "," + d.fisheye.y + ")"; })
// Now change the 'r'adius on the circles within
// One can also scale the font of the text inside nodeElements here
.select("circle")
.attr("r", function(d) { return 15 * graph.nodeSizeFactor * d.fisheye.z; });
d3.select("svg").selectAll("line")
.attr("x1", function(d) { return d.source.fisheye.x; })
.attr("y1", function(d) { return d.source.fisheye.y; })
.attr("x2", function(d) { return d.target.fisheye.x; })
.attr("y2", function(d) { return d.target.fisheye.y; });
});请注意，我还应用了适当的标度graph.x和graph.y来表示transform属性，并将15 * graph.nodeSizeFactor应用于圆圈半径(而不是4.5)。
工作演示：http://jsfiddle.net/90u4sjzm/23/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26742902
复制相关文章
相似问题
腾讯云开发者
