19

以下のように<script type="text/javascript">使用する静的グラフの実際のコード例 (一部のみ) があります。d3.js

        /* Create graph data */
        var nodes = [];
        for (var i = 0; i < 13; i++) 
        {
            var datum = {
                "value": i
            };
            nodes.push(datum);
        }

        var links = [{"source": 0, "target": 1},
                     {"source": 1, "target": 2},
                     {"source": 2, "target": 0},
                     {"source": 1, "target": 3},
                     {"source": 3, "target": 2},
                     {"source": 3, "target": 4},
                     {"source": 4, "target": 5},
                     {"source": 5, "target": 6},
                     {"source": 5, "target": 7},
                     {"source": 6, "target": 7},
                     {"source": 6, "target": 8},
                     {"source": 7, "target": 8},
                     {"source": 9, "target": 4},
                     {"source": 9, "target": 11},
                     {"source": 9, "target": 10},
                     {"source": 10, "target": 11},
                     {"source": 11, "target": 12},
                     {"source": 12, "target": 10}];

        /* Create force graph */
        var w = 800;
        var h = 500;

        var size = nodes.length;
        nodes.forEach(function(d, i) { d.x = d.y = w / size * i});

        var svg = d3.select("body").append("svg")
                    .attr("width", w)
                    .attr("weight", h);

        var force = d3.layout.force()
                      .nodes(nodes)
                      .links(links)
                      .linkDistance(200)
                      .size([w, h]);

        setTimeout(function() {

            var n = 400
            force.start();
            for (var i = n * n; i > 0; --i) force.tick();
            force.stop();

            svg.selectAll("line")
               .data(links)
               .enter().append("line")
               .attr("class", "link")
               .attr("x1", function(d) { return d.source.x; })
               .attr("y1", function(d) { return d.source.y; })
               .attr("x2", function(d) { return d.target.x; })
               .attr("y2", function(d) { return d.target.y; });

            svg.append("svg:g")
               .selectAll("circle")
               .data(nodes)
               .enter().append("svg:circle")
               .attr("class", "node")
               .attr("cx", function(d) { return d.x; })
               .attr("cy", function(d) { return d.y; })
               .attr("r", 15);

            svg.append("svg:g")
               .selectAll("text")
               .data(nodes)
               .enter().append("svg:text")
               .attr("class", "label")
               .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
               .attr("text-anchor", "middle")
               .attr("y", ".3em")
               .text(function(d) { return d.value; });

        }, 10);

そして、このややごちゃごちゃしたレイアウトが生成されます。

ここに画像の説明を入力

技術的には正しいグラフですが、理想的なレイアウトは次のようになります (さまざまなビジュアル グラフィックは無視します)。

ここに画像の説明を入力

ページをリロードしても各ノードの位置が変わらないように、レイアウトを修正する必要があることに注意してください。アニメーション効果がなく、ノードをドラッグできないという点で、レイアウトも静的にする必要があります。両方の要件は、上記のスクリプトで既に達成されています。

d3では、2 番目の画像に示すレイアウトを生成するには、このスクリプトをさらにどのように構成すればよいでしょうか?

4

1 に答える 1

32

まず、充電強度を上げ、リンク距離を短くします。そうすることで、ローカル接続よりもグローバル構造に重点が置かれます。また、電荷強度を十分に上げると、反発電荷によって直接接続されたノードもさらに離れて押し出されるため、リンク距離が効果的に増加し、全体的な構造が向上します。（より強い電荷力の欠点は、グラフの初期化がより混沌としていることですが、これは静的レイアウトでは問題にならないはずです。）

次に、より良い結果を得るには、反復回数を増やすか、カスタムフォースを追加する必要がある場合があります。フォースレイアウトは、多くの場合、任意のグラフでうまく機能しますが、最適な（またはさらに良い）結果が得られるという保証はありません。単純化した仮定を行うことができるグラフ（たとえば、ツリー）の場合、シミュレーションをより良いソリューションに収束させるために適用できる追加の力または制約が存在する可能性があります。

于 2012-08-10T04:51:58.280 に答える