Wie filtere ich Links dynamisch in einem Knoten-Link-Netzwerk in Protovis?
Frage
Mein Code basiert auf Protovis -Beispielcode für Kraftsteuerlayouts. Ich möchte die Möglichkeit hinzufügen, Links dynamisch mit einem Schieberegler zu filtern, basierend auf ihrem Wert. Ich habe bereits einen einfachen Schieberegler. Was ich nicht weiß, ist, wie das Netzwerkobjekt aktualisiert werden soll, so dass nur die Links, die einen Wert haben, der größer ist als der Wert des Schiebereglers. Weiß jemand, wie man das macht?
Der Code zum Erstellen des Diagramms ist
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();
Ich erstelle den Schieberegler mit HTML5
<input type="range" min="0" max="20" value="2" step="1" onchange="setAndShowNewValue(this.value)" />
<span id="range">2</span>
Und setzen Sie den neuen Mindestwert mit
function setAndShowNewValue(newValue)
{
document.getElementById("range").innerHTML=newValue;
minLinkValue = newValue;
}
Danke, Raul
Lösung
Ok, die Antwort war in einem Thread bei Protovis Google Group
Ich habe also die folgende Funktion erstellt und sie aufrufen, nachdem ich den für einen Link zulässigen Mindestwert aktualisiert habe:
function filterLinks() {
force.links(grafica.links.filter(function(d) { return d.value >
minLinkValue} ));
force.reset();
}
Dann habe ich den Code in Protovis behoben, wie im erwähnten Thread vorgeschlagen