53

だから私はすでにここに示されているような力指向グラフを描くページを持っています。

そして、それはうまくいきます。ここからJSを使用していますが、ノードを少しうまく広げるためにいくつかの調整を加えています。

これらは多かれ少なかれ唯一の違いです：

d3.json("force.json", function(json) {
  var force = d3.layout.force()
      .gravity(0.1)
      .charge(-2000)
      .linkDistance(1)
      .linkStrength(0.1)
      .nodes(json.nodes)
      .links(json.links)
      .size([w, h])
      .start();

リンクの強度を下げると、リンクがバネのようになり、よく使用されるFruchterman＆Reingoldの手法に似たものになります。これはかなりうまく機能しますが、かなり小さいグラフの場合のみです。グラフが大きくなると、交差点の数が増えるだけです。予想どおりですが、通常、グラフが到達するソリューションは最適とはほど遠いものです。私は最適な解決策を得る方法を探していません、それは非常に難しいことを知っています。ノードだけでなくラインも強制的に離そうとする大雑把な追加が必要です。

リンク間およびノー​​ド間に反発を追加する方法はありますか？私はD3フォースの仕組みに精通しておらず、これが可能であると言っているものを見つけることができないようです...

4

4 に答える 4

14

残念ながら、あなたの質問に対する答えは存在しません。

D3には、エッジをはじく、またはエッジの交差を最小限に抑える組み込みのメカニズムはありません。エッジにチャージを実装するのはそれほど難しいことではないと思うかもしれませんが、ここにあります。

さらに、一般的にエッジの交差を減らすメカニズムはどこにも存在しないようです。私は数十の視覚化ライブラリとレイアウトアルゴリズムを調べましたが、それらのどれも一般的な無向グラフのエッジ交差を減らすことを扱っていません。

平面グラフ、2レベルのグラフ、またはその他の単純化に適したアルゴリズムがいくつかあります。dagreは、理論的には2レベルのグラフでうまく機能しますが、ドキュメントがまったくないため、操作することはほとんど不可能です。

この理由の一部は、グラフのレイアウトが難しいことです。特に、エッジの交差を最小限に抑えることはNP困難であるため、ほとんどのレイアウト設計者はその問題にぶつかり、キーボードに頭を数回ぶつけて諦めたのではないかと思います。

誰かがこれのための良いライブラリを思いついたら、私たちの残りのためにそれを公開してください:)

于 2016-06-30T23:08:57.557 に答える
5

エッジを強制的にはじくよりも簡単な方法は、システム内の交差する線の量が少なくなるまでノードを小刻みに動かすことです。

http://en.wikipedia.org/wiki/Simulated_annealing

接続数が最も少ないノードから開始し、小刻みに移動します。

エッジをノードとして使用しようとすると、同じ空間ロックの問題が発生する可能性があります。解決策は、エッジの交差がどこにあるか、そしてそれらを解決できるかどうかを把握することです。エッジの交差の多くを解決できない場合があります

視覚化へのより横方向のアプローチは、一度にノードと接続のサブセットのみが表示されるようにアニメーション化することです。または、ユーザーがノードにマウスフォーカスを置くまでエッジを透明にします。これにより、関連するエッジがより見やすくなります。

于 2012-11-29T19:27:28.187 に答える
0

Force Editorの例に従い、設定chargeとlinkDistance値で問題が解決することを確認しました。

  ...
  .charge(-200)
  .linkDistance(50)
  ...

スクリーンショット：

ここに画像の説明を入力してください

于 2014-08-08T07:16:15.433 に答える
-2

私はこれに関する問題を「解決」しました：

nodes[0].x = width / 2;
nodes[0].y = 100;
nodes[0].fixed = true;
force.on("tick", function(e) {

    var kx = .4 * e.alpha, ky = 1.4 * e.alpha;
    links.forEach(function(d, i) {
      d.target.x += (d.source.x - d.target.x) * kx;
      d.target.y += (d.source.y + 80 - d.target.y) * ky;
    });
    [...]
 }

http://mbostock.github.io/d3/talk/20110921/parent-foci.html

それは私たちが望んでいたものではありませんが、以前のように優れています。重要なのは、「ルート」ノードを定義して修正することです。

nodes[0].fixed = true;

木のように見えますが、より鮮明です。

于 2017-09-13T09:00:32.283 に答える