javascript - How can I add the fisheye lens effect to my hierarchical edge bundling graph? -
i've made hierarchical edge bundling graph similar example provided mike bostock (which i've linked on jsfiddle). problem graph larger makes unable displayed in viewing window without having multitude of nodes overlapping each other because there many (around 1500). made actual circle larger no nodes overlap means you're able view portion of graph , must scroll view rest.
eventually tried zooming out of enlarged circle made wholly visible on page, names of nodes small discern. therefore, want implement fisheye lens effect on graph has magnifying effect on small text whenever user hovers on nodes , can therefore read text under "magnifying glass".
this code fisheye lens example has no effect when added edge bundling graph. can see desired effect here: http://bost.ocks.org/mike/fisheye/
what must change achieve effect on 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 example of hierarchical bundling graph on implement fisheye effect.
Comments
Post a Comment