This has been solved by Vanuan.
I've previously implemented zoomable force directed graphs in javascript. It worked well, but Protovis has been deprecated and replaced by D3.js. I've been trying to implement the same functionality with D3, but I seem to be stuck.
These screen shots give a feel for the results:
| Protovis |  |
 |
Looks good. Notice that the font size remains the same. The relative positions are the same, but everything is now further apart so text is no longer overlapping. |
| D3 |  |
 |
Looks bad. The connecting lines have zoomed, but the circles are unmoved. I can use svg transform to move the circles, but when I do, they do not maintain their positions above the intersecting lines. This is because the mouse position influences the focal point of the zoom. |
But to really understand you need to play with the live versions, and see the zooming as it happens.
They seem similar but if you try to zoom the images, the difference becomes obvious. You can zoom by using your mousewheel, (or on a mac try 2 finger scroll on the trackpad).
Protovis: working well
D3: not zooming correctly
What I need is
- D3 based force directed graphs
- circles, text labels, and connecting lines
- Zoom should maintain the graph structure, and enlarge the viewing area
- connecting lines must zoom
- circle radius zooming is desirable, but not a firm requirement
- Text zoom is not needed. It may be desirable to zoom a bit, but not as much as the general graph, as this would not help legibility of overlapping labels
cariaso@snpedia.com
- I think you should use other technic to prevent overlapping. Not zooming text defies the purpose of zoom. http://plnkr.co/edit/cDrRQwcMOmmJmHlL6DF2?p=preview -- Vanuan 04:06, 1 September 2013 (UTC)
