6

私は現在、どこかから SELECT とどこかへの INSERT を繰り返すだけの前任者によって記述されたバッチ スクリプトの構造を視覚化することに取り組んでいます。ツリー関数を使用しようとしましたが、JSON の同じインデックスにある同じ名前を同じノードとして認識させたい場合に、柔軟に使用できませんでした。

そこで、強制レイアウト機能を使用することに決め、グーグルの助けを借りてほぼ完了しました。ただし、一部を初期化するために同じ領域に同じデータベースまたはスクリプトのグループをマップすることはできますが、何とか force.on("tick", function() ~~ 各ノード間の距離を再計算すると、本当に面倒になりました。これは、ノード間のリンクを表示しません。

JSONを使用してリンクが再計算されている間にレイアウトを固定する方法を知っている人はいますか? 私のコードは次のようなものです：

          node.append("circle")
              .attr("cx", function(d) { return d.group*70; })
              .attr("cy", function(d) { return d.index*10; })
              .attr("r", 10)
              .attr("fill", function(d) {
                   return "rgb(" + (255 - d.group*20) + ",0,"+(d.group*50) + ")";
              });

          node.append("text")
              .attr("dx", function(d){return d.group*70;})
              .attr("dy", function(d){return d.index*10;})
              .text(function(d) { return d.name });
          force.on("tick", function() {
              alert(debugPrint(this));
              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; });

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

2 に答える 2

0

次のような関数を追加しfunction(d){ d.fixed = true }、ティック中 (または最初のティック中) に各ノードでそれを呼び出すと、静的グラフが作成されます。それ以外の場合は、コードの実行後 (または最初のティック中) に呼び出すことができforce.stop()、同じことが達成されます。

私が遭遇した問題は、コード ブロックの最後で呼び出すforce.stop()と、グラフが SVG の中心に適切に収まる前にグラフがフリーズすることでした。静的なグラフは気にしていなかったので、'mousedown' イベント関数を作成しました。ノードが場所に移動されたときにノードを修正しました。

于 2012-11-20T20:48:47.010 に答える
0

有向視覚化の静的を見ることができますhttp://bl.ocks.org/mbostock/1667139

基本的に、強制レイアウトを作成し、それにノードとリンクを割り当ててから開始します。

次に、 force.tick() メソッドticksを何度も実行します。これにより、レイアウト内の各ノードの位置が計算されます。ticks良いグラフを得るには、 の値を試してみる必要があります。この値は、グラフ内のノード数に比例して増加する必要があります。

force = d3.layout.force();

ticks=2000;  //number of ticks for calculating the force layout

force
    .nodes(nodes)  //nodes = array of nodes
    .links(links)  //links = array of links
    .start();

for (var i = ticks; i > 0; --i) force.tick();

force.stop();

上記のコードを開始する前にこれを行う必要があります。

これで、ノードとリンクを配置するために使用できる力オブジェクトができました。アトリビュートをノード変数とリンク変数に直接割り当てます（以前は tick 関数内で行われていました）。

コードは次のようになります。

node.append("circle")
    .attr("cx", function(d){return d.group*70; })
    .attr("cy", function(d){return d.index*10;})
    .attr("r", 10)
    .attr("fill",function(d){
        return "rgb(" + (255 - d.group*20) + ",0,"+(d.group*50) + ")"
    })
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

node.append("text")
    .attr("dx", function(d){return d.group*70;})
    .attr("dy", function(d){return d.index*10;})
    .text(function(d) { return d.name });

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; });
于 2013-04-04T20:39:39.887 に答える