I created a hierarchical graph combining a graph similar to the example provided by Mike Bostock (which I linked to jsfiddle). The problem is that my graph is much larger, which makes it impossible to fully display in the viewport without having many nodes overlapping each other, because there are so many (about 1500). I made the actual circle larger so that no nodes overlap, but that means you can view part of the graph and scroll to see the rest.
In the end, I tried to scale from the enlarged circle, which made it fully visible on the page, however the node names were clearly too small to distinguish. Therefore, what I want to do is to realize the effect of a fisheye lens on the graph so that it increases the effect on the small text whenever the user hangs over the nodes and therefore can read the text under the "magnifying glass".
This code is for an example of a fisheye lens, but it does not work when adding edge binding to a graph. You can see the desired effect here: http://bost.ocks.org/mike/fisheye/
What should I change to achieve this effect on my chart?
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 an example of a hierarchical link graph on which I would like to implement the fish effect.
https://jsfiddle.net/6zubznta/1/