How to filter links dynamically in a node-link network in protovis?

23 views
Skip to first unread message

Raul Sierra Alcocer

unread,
Mar 17, 2011, 6:45:22 PM3/17/11
to prot...@googlegroups.com

Hi all,

My code is based on protovis sample code for Force-Directed Layouts. I would like to add the ability to dynamically filter links with a slider based on their value. I already have a basic slider working. What I don't know is how to update the Network object so that only renders only the links that have a value greater than the value on the slider. Does anyone know how to do this?

The code to create the graph is


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();

I create the slider with html5


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

And set the new minimum value with


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

Thanks, 

Raul

Raul

unread,
Mar 17, 2011, 7:22:45 PM3/17/11
to protovis
Ok, the answer was in a previous thread

http://groups.google.com/group/protovis/browse_thread/thread/af0e05c496f66eb4/641cf85269631dc0

I call the following function after updating the minimum value allowed
for a link:

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

Then I fixed the code in protovis as suggested in the mentioned thread

On 17 mar, 16:45, Raul Sierra Alcocer <raul.sierra.alco...@gmail.com>
wrote:
> Hi all,
>
> My code is based on protovis sample code for Force-Directed
> Layouts<http://vis.stanford.edu/protovis/ex/force.html>.
Reply all
Reply to author
Forward
0 new messages