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.
我正面临着将fisheye效果融入到我当前的标记-力量-布局D3中以可视化的方式显示一个密集的url网络的困难。我可以对现有代码做一些更改，以便成功地将fisheye应用到节点和连接链接，但是当我尝试为附加的节点标签使用代码片段时，一切都中断/无法工作。
This is the sample JSON file (not dense data) being used to populate the graph:
这是用于填充图形的示例JSON文件(不是密集数据):
[{"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
这是正在使用的javascript代码，用于读取JSON文件、创建所需的节点/链接/标签并应用fisheye。生成可视化的JavaScript代码
This is the html page:
这是html页面:
<!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?!
我不知道如何在代码中添加锚节点/链接的fisheye。有人能帮我解决这个问题吗?!
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).
编辑:我已经更新了页面的HTML代码。下面是指向这里使用的所有JS文件的公共链接。我尝试创建一个JSFiddle，但是由于我无法将JSON文件作为外部资源提供(我不知道如何做到)，所以无法使它工作。
Links to relevant JavaScript and JSON Files:
链接到相关的JavaScript和JSON文件:
GraphPage D3 D3 min fisheye drawVisual JSON db sample
D3 D3 min fisheye drawVisual JSON db示例
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.
基本上，有了当前版本的代码(包括标签到节点的力)，所有的节点和标签都被绘制在页面的左上角，链接位于中间。fisheye效果对链接有效，但对节点+标签无效。
1 个解决方案
#1
1
You're setting the positions of the text and node elements separately, but all you need to do it set the positions of the g elements that they are contained in:
您将分别设置文本和节点元素的位置，但您所需要做的就是设置它们所包含的g元素的位置:
node.attr("transform", function(d) {
return "translate(" + d.fisheye.x + "," + d.fisheye.y + ")";
});
Complete example here.
完整的例子。
#1
1
You're setting the positions of the text and node elements separately, but all you need to do it set the positions of the g elements that they are contained in:
您将分别设置文本和节点元素的位置，但您所需要做的就是设置它们所包含的g元素的位置:
node.attr("transform", function(d) {
return "translate(" + d.fisheye.x + "," + d.fisheye.y + ")";
});
Complete example here.
完整的例子。