8

私はd3.jsに少し慣れていませんが、かなり楽しんでいます。これまでのところ、そこにある多くの例やチュートリアルに非常に近い力指向グラフを実装しました。

直接の懸念

多くの例のように、私は次のようなJSON構造を持っています。

{"nodes": ["node1", "node2",  ... ],
 "links": [{source: 0, target: 1, "field1": 5, ...}, ... ]}

ただし、次のようにデータソースを作成する方が簡単だと思います。

{"links": [
    {source: "node1", target: "node2", "field1": 5, ...},
    {source: "node2", target: "node4", "field1": 1, ...},
    {source: "node3", target: "node4", "field1": 8, ...}
]}

グラフでノードを明示的に定義する代わりに、リンク構造で暗黙的に定義されます。

理由

誰かが私が知らない特定のサンプルコードまたはこれを行うための慣用的な方法を持っていた場合に備えて、プロジェクトの最終的な目標をリストしたいと思いました。

プロジェクトの目標は、最終的にはリアルタイムで更新されるグラフになります。バックエンドは開発中であり、変更や改訂が行われる可能性があります。

現時点では、更新JSONフィードをX秒ごとにプルダウンし、そのグラフの構造を新しい情報で更新することを想像しています。プルされたフィードには、グラフの更新された構造のみが含まれるため、スクリプトは、既にプルされたノードとリンクをすべて維持し、必要に応じて新しいものを追加する必要があります。

ありがとう！

これまでに質問されたことがある場合は、お詫び申し上げます。検索しても何も見つかりませんでした。私がそれを逃したならば、私を侮辱し、殴打してください。

4

2 に答える 2

4

私はこれを数回しなければなりませんでした。私が見つけた最も簡単なアプローチは、リンクのリストに基づいてノードのセットを単純に計算し、それをフォース グラフが使用する配列に変換することでした。

var links = [ .... ];
var nodeMap = {};
links.forEach(function(d, i) { 
    nodeMap[d.source] = true;
    nodeMap[d.target] = true;
});

var nodes = [];
for (key in nodeMap)
    nodes.push(key);

d3.layout.force()
         .nodes(nodes)
         .links(links);
于 2012-09-03T03:02:10.917 に答える
4

「 D3 ベースの力指向ラジアル グラフ」の例でこれを行いました。これを行うのは、データが内部でどのように使用されているかを理解したいからです。JSON や CSV などの構造とは関係なく、後でいつでも階層化できます。

とにかく、例が役に立てば幸いです。

私のベスト、

フランク

于 2012-07-29T20:30:45.983 に答える