javascript - Weird behaviour of Fisheye Distortion plugin

问题描述:

Hi I would like to use Fisheye Distortion plugin for my force-directed graph in d3.js, but when I want to apply this plugin, behaviour of graph is weird. I am new in d3.js and not good at computer graphics.

complete sample in jsfiddle

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; });
});

Weird behaviour I mean the nodes of graph disappear (are hidden) after mouseover action.

网友答案:

The problem is that you were using the code to add cx and cy to circles, but your circles were actually enclosed inside nodeElements which were transformed into place.

Hence, changing the fisheye code to the following solves the problem:

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; });   
});

Note that I have also applied the proper scales graph.x and graph.y for the transform attribute and 15 * graph.nodeSizeFactor for the radius of the circles (instead of 4.5).

Working Demo: http://jsfiddle.net/90u4sjzm/23/

分享给朋友：

您可能感兴趣的文章：

随机阅读：

栏目列表

推荐内容

热点内容

动力学知识库

javascript - Weird behaviour of Fisheye Distortion plugin