2

我在当前的密集 URL 网络的标记力布局 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"}]

这是目前用于读取 JSON 文件、创建所需节点/链接/标签并应用鱼眼的 javascript 代码。 生成可视化的 JavaScript 代码

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

我不知道如何在代码中为锚节点/链接添加鱼眼。有人可以帮我解决这个问题吗？！

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

相关 JavaScript 和 JSON 文件的链接：

GraphPage D3 D3 min fisheye drawVisual JSON db 示例

这是可视化现在的样子：

在此处输入图像描述

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

4

1 回答 1

1

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

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

完整的例子在这里。

于 2014-12-13T12:04:14.870 回答