如何在protovis中动态过滤节点链接网络中的链接?
我的代码基于 强制导向布局 的 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;
}
, 劳尔
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
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
,答案就在 Protovis google group 的帖子中
好吧 ,我所做的是创建以下函数并在更新链接允许的最小值后调用它:
然后我按照上述线程中的建议修复了 protovis 中的代码
Ok, the answer was in a thread at Protovis google group
So, what I did is to create the following function and call it after updating the minimum value allowed for a link:
Then I fixed the code in protovis as suggested in the mentioned thread