I've made a hierarchical edge bundling graph similar to the example provided by Mike Bostock (which i've linked to on jsfiddle). The problem is that my graph is significantly larger which makes it unable to be fully displayed in the viewing window without having a multitude of nodes overlapping each other because there are just so many (around 1500). I made the actual circle larger so that no nodes overlap but that means that you're only able to view a portion of the graph and must scroll to view the rest.
Eventually I tried zooming out of the enlarged circle which made it wholly visible on the page, however the names of the nodes were obviously too small to discern. Therefore, what I want to do is implement the fisheye lens effect on the graph so that it has a magnifying effect on the small text whenever the user hovers over the nodes and can therefore read the text under the "magnifying glass".
This is the code for the fisheye lens example but it has no effect when added to the edge bundling graph. You can see the desired effect here: http://bost.ocks.org/mike/fisheye/
What must I change to achieve this effect on my graph?
var fisheye = d3.fisheye.circular()
.focus([360, 90])
.radius(100);
d3.select(".container").on("mousemove", function() {
fisheye.focus(d3.mouse(this));
node.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; });
link.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; });
});
This is the example of the hierarchical bundling graph on which I would like to implement the fisheye effect.
