Question

我的代码基于Force-Directed Layouts的protovis示例代码。我想添加基于它们的值动态过滤带滑块的链接的功能。我已经有一个基本的滑块工作。我不知道的是如何更新网络对象，以便只渲染值大于滑块上的值的链接。有谁知道如何做到这一点？

创建图表的代码是

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;
    }

谢谢，劳尔

Answer 1

好的，答案是在Protovis google group

的帖子中

所以，我做的是创建以下函数并在更新链接允许的最小值后调用它：

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

然后我按照提到的线程

中的建议修复了protovis中的代码

如何在protovis中的节点链接网络中动态过滤链接？

1 个答案: