根据按钮点击过滤力向图的节点和链接

Question

我有一个完全有效的力定向图。下一阶段是在主要 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

 var IDData = JSON.stringify([
  ["node/105173", "node/38180995", "Agent", "Customer", "1379644.0", 1, 264, "1374903"],
  ["node/1061", "node/21373542", "Agent", "Customer", "530848.0", 1, 3000, "529502"],
  ["node/10750", "node/59648369", "Agent", "Customer", "1454228.0", 1, 120, "1454118"],
  ["node/10750", "node/78569210", "Agent", "Customer", "1425251.0", 1, 234, "1421416"],
  ["node/10750", "node/96726118", "Agent", "Customer", "1376239.0", 1, 434, "1376152"],
  ["node/10946829", "node/11190", "Customer", "Agent", "1409620.0", 20, 3380, "1406665"],
  ["node/10946829", "node/57774036", "Customer", "Customer", "1460029.0", 3, 960, "1459731"],
  ["node/109947", "node/97911872", "Agent", "Customer", "1323025.0", 1, 600, "1315582"],..])

我解析了这个动态 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);

});

使用这个，我制作了一个受 d3.js library

启发的力导向图

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

现在我正在尝试添加一个过滤器功能，它将过滤按钮点击时的数据：

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

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

Answer 1

好的，这是 fiddle：https://jsfiddle.net/t6ycuoyo/54/

我制作了一个按钮并向其添加了一个 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);
});

根据按钮点击过滤力向图的节点和链接

Filtering nodes and links of a forced directed graph based on a button click

javascript

jquery

d3.js

graph-visualization