× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Weird behaviour of Fisheye Distortion plugin

Utkarsh Upadhyay
Apr 16, 2015
<p>The problem is that you were using the code to add <code>cx</code> and <code>cy</code> to circles, but your circles were actually enclosed inside <code>nodeElements</code> which were <code>transform</code>ed into place.</p> <p>Hence, changing the fisheye code to the following solves the problem:</p> <pre><code>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; }); }); </code></pre> <p>Note that I have also applied the proper scales <code>graph.x</code> and <code>graph.y</code> for the <code>transform</code> attribute and <code>15 * graph.nodeSizeFactor</code> for the radius of the circles (instead of <code>4.5</code>).</p> <p>Working Demo: <a href="http://jsfiddle.net/90u4sjzm/23/" rel="nofollow">http://jsfiddle.net/90u4sjzm/23/</a></p> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/26742902/Weird%20behaviour%20of%20Fisheye%20Distortion%20plugin/26913639">Stack Overflow</a>.</p>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus