Javascript 基于按钮单击过滤强制有向图的节点和链接

我有一个完全工作力有向图。下一步是在主html数据中添加按钮以进一步过滤。到目前为止，我还没有成功。如有任何意见，我们将不胜感激。单击“High_Txn”应仅呈现链接值为

d.Total_Amount>100

的节点

HTML

<style>
    .links line {
        stroke: #999;
        stroke-opacity: 0.6;
    }

    .nodes circle {
        stroke: #fff;
        stroke-width: 1.5px;
    }

    .nodes circle {
        stroke: #fff;
        stroke-width: 1.5px;
    }

    div.tooltip {
        position: absolute;
        background-color: white;
        max-width: 200px;
        height: auto;
        padding: 1px;
        border-style: solid;
        border-radius: 4px;
        border-width: 1px;
        box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
        pointer-events: none;
    }
</style>
<button type="button" value="Complete">Complete_Data</button>
<button type="button" value="High_Txn">High_Txn</button>

我解析这个动态JSON数据，并将其转换为d3.js所需的格式，如下所示：

$(document).ready(function() {

    console.log(IDData);
    var galData = JSON.parse(IDData);
    var startnodes = [];
    var endnodes = [];
    var startnodetype = [];
    var endnodetype = [];
    var PayTime = [];
    var TXN_COUNT = [];
    var Total_Amt = [];
    var SendTime = [];
    galData.map(function(e, i) {
        startnodes.push(e[0]);
        endnodes.push(e[1]);
        startnodetype.push(e[2]);
        endnodetype.push(e[3]);
        PayTime.push(e[4]);
        TXN_COUNT.push(e[5]);
        Total_Amt.push(e[6]);
        SendTime.push(e[7]);
    });
    var final_data = createNodes(startnodes, endnodes, startnodetype, endnodetype, depth, PayTime, TXN_COUNT, Total_Amt, SendTime);
    makeGraph("#Network_graph", final_data);

});

利用这一点，我制作了一个力定向图，灵感来自

有关完整代码和工作图，请参阅

现在，我正在尝试添加一个过滤功能，该功能将过滤按钮上的数据，单击：

function filterNetwork() { //not sure if this is the right way to filter , so open to other ideas
    force.stop()
    originalNodes = force.nodes();
    originalLinks = force.links();
    influentialNodes = originalNodes.filter(function(d) {
        return d.Total_Amount > 100
    });
    influentialLinks = originalLinks.filter(function(d) {
        return influentialNodes.indexOf(d.source) > -1 && influentialNodes.indexOf(d.target) > -1
    });

    d3.selectAll("g.node")
        .data(influentialNodes, function(d) {
            return d.id
        })
        .exit()
        .transition()
        .duration(12000)
        .style("opacity", 0)
        .remove();

    d3.selectAll("line.link")
        .data(influentialLinks, function(d) {
            return d.source.id + "-" + d.target.id
        })
        .exit()
        .transition()
        .duration(9000)
        .style("opacity", 0)
        .remove();

    force
        .nodes(influentialNodes)
        .links(influentialLinks)

    force.start()
}

另外，如何将上述过滤函数连接到html中的按钮单击？我在javascript方面没有太多的专业知识来完成这样的事情。所以，期待一些帮助

好的，这是小提琴：

我制作了一个按钮，并在其中添加了一个eventListener，这样当单击它时，它将过滤链接和节点，并重新呈现图形：

function isUnique(id, nodes){
    for(var i = 0; i < nodes.length; i++){
        if(nodes[i].id == id){
            return false;
        }
    }
    return true;
}

myBtn.addEventListener("click",function(){
  var nodes = [];
  var links = [];
  d3.selectAll("line").filter(function(d,i){
     if(d.total_amt>100){
       if(isUnique(d.source.id, nodes)){
            nodes.push(d.source);
       }

       if(isUnique(d.target.id, nodes)){
            nodes.push(d.target);
       }
       links.push(d);
     }
  });
  filtered_data.links = links;
  filtered_data.nodes = nodes;
  filtered_data.nodetype = final_data.nodetype;

  d3.select('#Network_graph').selectAll("*").remove();
  makeGraph("#Network_graph", filtered_data);
});

fullBtn.addEventListener("click",function(){
  d3.select('#Network_graph').selectAll("*").remove();
  makeGraph("#Network_graph", final_data);
});

函数是唯一的（id，节点）{
对于（var i=0；i100）{
if（isUnique（d.source.id，节点））{
节点推送（d.source）；
}
if（isUnique（d.target.id，节点））{
节点推送（d.target）；
}
链接。推送（d）；
}
});
过滤的数据链接=链接；
过滤的_data.nodes=节点；
过滤的_data.nodetype=最终的_data.nodetype；
d3.选择（“#网络图”）。选择全部（“*”）。删除（）；
makeGraph（“网络图”，过滤的数据）；
});
fullBtn.addEventListener（“单击”，函数（）{
d3.选择（“#网络图”）。选择全部（“*”）。删除（）；
makeGraph（“网络图”，最终数据）；
});

好的，这是小提琴：

我制作了一个按钮，并在其中添加了一个eventListener，这样当单击它时，它将过滤链接和节点，并重新呈现图形：

function isUnique(id, nodes){
    for(var i = 0; i < nodes.length; i++){
        if(nodes[i].id == id){
            return false;
        }
    }
    return true;
}

myBtn.addEventListener("click",function(){
  var nodes = [];
  var links = [];
  d3.selectAll("line").filter(function(d,i){
     if(d.total_amt>100){
       if(isUnique(d.source.id, nodes)){
            nodes.push(d.source);
       }

       if(isUnique(d.target.id, nodes)){
            nodes.push(d.target);
       }
       links.push(d);
     }
  });
  filtered_data.links = links;
  filtered_data.nodes = nodes;
  filtered_data.nodetype = final_data.nodetype;

  d3.select('#Network_graph').selectAll("*").remove();
  makeGraph("#Network_graph", filtered_data);
});

fullBtn.addEventListener("click",function(){
  d3.select('#Network_graph').selectAll("*").remove();
  makeGraph("#Network_graph", final_data);
});

函数是唯一的（id，节点）{
对于（var i=0；i100）{
if（isUnique（d.source.id，节点））{
节点推送（d.source）；
}
if（isUnique（d.target.id，节点））{
节点推送（d.target）；
}
链接。推送（d）；
}
});
过滤的数据链接=链接；
过滤的_data.nodes=节点；
过滤的_data.nodetype=最终的_data.nodetype；
d3.选择（“#网络图”）。选择全部（“*”）。删除（）；
makeGraph（“网络图”，过滤的数据）；
});
fullBtn.addEventListener（“单击”，函数（）{
d3.选择（“#网络图”）。选择全部（“*”）。删除（）；
makeGraph（“网络图”，最终数据）；
});

fiddle不可用working@echonax提供了一个正在工作的小提琴示例。小提琴不是working@echonax现在提供了一个工作小提琴的例子。我注意到在点击“clicky”之后节点和链接的数量在增加。@optimus\u prime我忘记在重新渲染之前清除svg。所以我认为它添加了节点和链接：）只需在重新渲染之前清除svg即可。这太棒了。所以，我想要两个按钮。一个渲染整个图形，另一个渲染过滤后的图形。因此，我应该如何选择整个图形var myBtn=document.getElementById（“d”）？再次感谢。“事件侦听器”这篇文章很有教育意义。@optimus\u prime很高兴我能提供帮助：）我注意到，在单击“clicky”之后，节点和链接的数量正在增加。@optimus\u prime在重新渲染之前，我忘了清除svg。所以我认为它添加了节点和链接：）只需在重新渲染之前清除svg即可。这太棒了。所以，我想要两个按钮。一个渲染整个图形，另一个渲染过滤后的图形。因此，我应该如何选择整个图形var myBtn=document.getElementById（“d”）？再次感谢。“事件侦听器”这篇文章很有教育意义。@optimus\u prime很高兴我能帮上忙：）