根据表单输入过滤d3 js对象

时间:2014-02-27 13:46:28

标签: javascript jquery d3.js

我正在使用d3js来显示节点和边缘的网络。在可视化中,我在搜索节点中包含一个选项[HTML表单输入]。输入可以是多个节点。

我很难使用过滤功能过滤多个节点。我搜索了不少但没有找到类似的问题。以下是相关代码:

$("#submit-search").submit(function(event) {
     // values separated by commas
    var ip = $("#search-nodes").val().split(',');
    // converts to integers
    for(var i=0; i<ip.length; i++) {ip[i] = parseInt(ip[i], 10);}
    visualization.selectAll('circle')
    .filter(function(d){
         return ip.indexOf(d.name) != -1 ? d.name : false;
    })
    .style("stroke-width", 15)
    .style("stroke-opacity", 0.75)
    .style("fill", "black");
});

由于indexOf函数仅返回第一个匹配,因此只突出显示一个节点。我试图使用jQuery的grep函数但没有成功。

添加了可视化图像。由于我在本地使用django框架,因此无法公开使用。

编辑:包含jsfiddle http://jsfiddle.net/ZqzbN/ [错误]

节点具有以下属性:度中心性,组,名称,中介中心性,度 边缘具有以下属性:源节点,目标节点,组

1 个答案:

答案 0 :(得分:-1)

我对d3js并不熟悉,但我能提出的最简单的解决方案是将可视化范围之外的过滤器功能分开。我会推荐这样的东西。它只是伪代码:

var new_array;

for each node in ip:
  insert node.name into new_array if node.name != -1
end

visualization.do_your_stuff_with(new_array);