Protovisのノードリンクネットワークでリンクを動的にフィルタリングする方法は?

StackOverflow https://stackoverflow.com/questions/5342276

  •  27-10-2019
  •  | 
  •  

質問

私のコードは、プロトビスサンプルコードに基づいています フォース指向レイアウト. 。その価値に基づいて、スライダーとリンクを動的にフィルタリングする機能を追加したいと思います。私はすでに基本的なスライダーを動作させています。私が知らないのは、スライダーの値よりも大きい値を持つリンクのみをレンダリングするように、ネットワークオブジェクトを更新する方法です。誰かがこれを行う方法を知っていますか?

グラフを作成するコードはです

var minLinkValue = 2;
var vis = new pv.Panel()
    .width(w)
    .height(h)
    .fillStyle("white")
    .event("mousedown", pv.Behavior.pan())
    .event("mousewheel", pv.Behavior.zoom());

var force = vis.add(pv.Layout.Force);
force.nodes(grafica.nodes);
force.links(grafica.links.filter(function(d) { return d.value > minLinkValue} ));

force.link.add(pv.Line);

force.node.add(pv.Dot)
    .fillStyle(function(d) { return color(d) })         
    .strokeStyle(function() { return this.fillStyle().darker() })
    .lineWidth(1)
    .title(function(d) { return d.nodeName })
    .visible(function(d) { return d.linkDegree > 0 })
    .event("mousedown", pv.Behavior.drag());

vis.render();

HTML5でスライダーを作成します

<input type="range" min="0" max="20" value="2" step="1" onchange="setAndShowNewValue(this.value)" />
<span id="range">2</span>

新しい最小値をで設定します

    function setAndShowNewValue(newValue)
    {
        document.getElementById("range").innerHTML=newValue;
        minLinkValue = newValue;
    }

ありがとう、ラウル

役に立ちましたか?

解決

OK、答えはスレッドにありました Protovis Googleグループ

したがって、私がしたことは、次の関数を作成し、リンクに許容される最小値を更新した後に呼び出すことです。

function filterLinks() { 
        force.links(grafica.links.filter(function(d) { return d.value > 
minLinkValue} )); 
        force.reset(); 
} 

次に、前述のスレッドで提案されているように、Protovisでコードを修正しました

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top