I am facing difficulty incorporating the fisheye effect in my current labelled-force-layout D3 visualization of a dense network of URLs. I was able to make several changes to the existing code to apply the fisheye successfully to the nodes and connecting links but everything breaks/doesn't work when I try to use the code snippet for the attached node-labels.
This is the sample JSON file (not dense data) being used to populate the graph:
[{"url":"http:\/\/understandblue.blogspot.com\/","parentURL":"http:\/\/understandblue.blogspot.com\/","level":"1","category":"1"}, {"url":"http:\/\/paperfriendly.blogspot.com\/","parentURL":"http:\/\/understandblue.blogspot.com\/","level":"2","category":"1"}, {"url":"http:\/\/4pawsforever.org","parentURL":"http:\/\/understandblue.blogspot.com\/","level":"2","category":"3"}, {"url":"en.wikipedia.org","parentURL":"http:\/\/understandblue.blogspot.com\/","level":"2","category":"3"}, {"url":"http:\/\/test9.blogspot.com\/","parentURL":"http:\/\/understandblue.blogspot.com\/","level":"2","category":"2"}, {"url":"http:\/\/www.creativecommons.org","parentURL":"http:\/\/understandblue.blogspot.com\/","level":"2","category":"3"}, {"url":"http:\/\/someniceblog.typepad.com","parentURL":"http:\/\/understandblue.blogspot.com\/","level":"2","category":"2"}, {"url":"http:\/\/autismhelp.org","parentURL":"http:\/\/someniceblog.typepad.com","level":"3","category":"3"}]
This is the javascript code being used right now to read the JSON file, create the required nodes/links/labels and apply the fisheye. JavaScript code generating the visualization
This is the html page:
<!DOCTYPE html>
<html>
<head>
<title>Visualization</title>
<!-- D3 Scripts --->
<!-- <script src="d3.v2.js"></script> --->
<script src="d3.js"></script>
<script src="d3.min.js"></script>
<script src="fisheye.js"></script>
<script src="drawVisual.js"></script>
</head>
<body>
<div id="forcedLayoutGraph">
</div>
</body>
</html>
I do not how to add the fisheye for the anchornodes/links in the code. Can someone please help me fix this?!
EDIT: I've updated the HTML code for the page. Following are the public links to all the JS files being used here. I tried creating a JSFiddle for the same but am unable to get it to work since I'm unable to provide the JSON file as an external resource (I don't know how to do that).
Links to relevant JavaScript and JSON Files:
GraphPage D3 D3 min fisheye drawVisual JSON db sample
This is how the visualization looks like right now:
Basically, with the current version of the code (that includes the force for the labels to the nodes), all the nodes and labels are drawn at the top-left corner of the page with the links somewhere around the middle. The fisheye effect works on the links but not for the node+labels.
You're setting the positions of the text and node elements separately, but all you need to do it set the positions of the
gelements that they are contained in:Complete example here.