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

【问题标题】：Unable to add Fisheye effect to Labels in Forced Labelled Layout using D3.js无法使用 D3.js 将鱼眼效果添加到强制标签布局中的标签
【发布时间】：2015-01-29 00:16:09
【问题描述】：

我在将fisheye 效果整合到我当前的密集 URL 网络的 labelled-force-layout D3 可视化中时遇到了困难。我能够对现有代码进行几处更改，以将鱼眼成功应用于节点和连接链接，但是当我尝试将代码 sn-p 用于附加的节点标签时，一切都会中断/不起作用。

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

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

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

相关 JavaScript 和 JSON 文件的链接：

GraphPage D3 D3 min fisheye drawVisual JSON db sample

这就是现在的可视化效果：

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

【问题讨论】：

我根本无法让您的代码正常工作。您能否提供一个完整的示例，最好是 jsfiddle 或类似的东西？
@LarsKotthoff 我尝试为它制作一个 JsFiddle，但我无法让它将 JSON 文件作为资源读取（目前整个代码库托管并运行在本地服务器和/或 DropBox 上）。我已经添加了所有相关文件，我希望这能帮助你让它工作。
只需设置g元素的位置：plnkr.co/edit/CGaMnDOY8to1VBnXBfUb?p=preview
完美！这工作得很好。谢谢:)

标签： javascript json d3.js data-visualization fisheye

【解决方案1】：

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

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

完整示例here。

【讨论】：