D3直線エッジと複数の曲線エッジを切り替える

Question

ノードノードのペアの間に2つ以上のエッジが存在することがあることを除いて、this exampleのD3フォースグラフと似ています。私は、すべての辺を視覚化することと、ただ一つの真っ直ぐな辺を切り替えることができるようにしたいと思います。エッジの可視性（隠れているか可視か）を単純に変更するだけで、これを動作させることができましたが、ノードの間にエッジがあり、視覚的な遅れがあります。

この問題を解決する私の考えは、曲面のすべてのエッジを含むのではなく、真っ直ぐなエッジでのみ力シミュレーションを実行することです。これは、ノードの対ごとにエッジを1つのエッジに限定し、したがって力シミュレーションアルゴリズムをより集中させないようにする。

強制アルゴリズムで使用されていないカーブしたエッジをまだレンダリングできるのですか？

Answer 1

これは、表示されていないものまですべてのパスを描画する方法をコードが計算しているときに、最大の計算boggleneckが実際に.on("tick", tickActions)ステップに入ったようです。興味を持っている人のため

、私は最初のエッジかどうかを描画する前にtype変数をチェックするtick actions機能を変更：

function tickActions() { 
    // plot the curved links 
    link.attr("d", function(d) { 
     if (d.type != draw_type) return null; 

     // code to draw paths 

    }); 
} 

draw_type変数を変更することで、あなたが実際に計算して描画されるエッジかを決定することができます。

これに加えて、特定のエッジの強さも無視する必要があります。私は私のグラフのみ直線エッジに基づいて間隔を置いて配置されるように望んでいたことを知っていたので、私はsimulation.force('link', link_force)属性に対して次のようでした：0にすべての非直線エッジの強さを設定することにより

var link_force = d3.forceLink() 

    // code for .id and .distance attributes 

    // return 0 for all non 
    .strength(function(d) { 
     if (d.type != 'straight') return 0; 
     return 0.3; 
    }); 

、力アルゴリズム基本的にノードを配置するときに無視されます。

最後に、グラフを更新するrestart_network()関数を追加しました。この関数を使用して、グラフに表示される実際のリンクデータを変更することは可能ですが、他の変更も同様に含めることにしました。

function restart_network() { 
    simulation.force("link", link_force); 
    simulation.alpha(1).restart(); 
}