2

URL の密集したネットワークの現在の labelled-force-layout 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 に答える