Question

我很难将fisheye效果纳入我当前标记的力 - 布局D3可视化的密集网络网络中。我能够对现有代码进行一些更改，以便将鱼眼成功应用到节点和连接链接，但是当我尝试将代码片段用于附加的节点标签时，所有内容都会中断/不起作用。

这是用于填充图表的示例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"}]

这是正在使用的javascript代码，用于读取JSON文件，创建所需的节点/链接/标签并应用鱼眼。 JavaScript code generating the visualization

这是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>

我不知道如何为代码中的anchornodes / links添加鱼眼。有人可以帮我解决这个问题吗？！

编辑：我已更新该网页的HTML代码。以下是此处使用的所有JS文件的公共链接。我尝试为此创建一个JSFiddle，但由于我无法将JSON文件作为外部资源提供（我不知道该怎么做），因此无法使其工作。

相关JavaScript和JSON文件的链接：

GraphPage D3 D3 min fisheye drawVisual JSON db sample

这就是可视化现在的样子：

enter image description here

基本上，使用当前版本的代码（包括标签对节点的强制力），所有节点和标签都绘制在页面的左上角，链接位于中间的某处。鱼眼效果适用于链接，但不适用于节点+标签。

Answer 1

您正在分别设置文本和节点元素的位置，但您只需设置它们所包含的g元素的位置：

node.attr("transform", function(d) {
  return "translate(" + d.fisheye.x + "," + d.fisheye.y + ")";
});

完整示例here。

无法使用D3.js将强制标记布局中的鱼眼效果添加到标签中

1 个答案: