javascript - D3 力向图 - 过滤节点和关联链接

Question

我在尝试在力导向图上使用过滤器时遇到困难。我可以过滤掉节点，但不能使关联的链接消失。我对 JavaScript 的了解非常有限，但我想逻辑应该是:如果节点被隐藏，则隐藏关联的链接。我走在正确的道路上吗？ 如果有人可以帮助我，我将不胜感激!

数据格式:

{
  "nodes": [
{"name":"AA1","group":"Group1","type":"a"},
{"name":"AA2","group":"Group2","type":"b"},
{"name":"AA3","group":"Group3","type":"c"},
{"name":"AA4","group":"Group4","type":"a"},
{"name":"AA5","group":"Group2","type":"b"},
{"name":"AA6","group":"Group4","type":"c"},...
],
  "links": [
{"source":1,"target":59,"value":1},
{"source":1,"target":88,"value":1},
{"source":3,"target":12,"value":1},
{"source":3,"target":16,"value":1},
{"source":3,"target":87,"value":1},
{"source":5,"target":3,"value":1},
{"source":5,"target":16,"value":1},
{"source":5,"target":114,"value":1},...  ]

过滤代码:

 // call method to create filter
createFilter();
// method to create filter
function createFilter()
{
    d3.select(".filterContainer").selectAll("div")
      .data(["a", "b", "c"])
      .enter()
      .append("div")
          .attr("class", "checkbox-container")
      .append("label")
      .each(function(d) {
         // create checkbox for each data
      d3.select(this).append("input")
        .attr("type", "checkbox")
        .attr("id", function(d) {return "chk_" + d;})
        .attr("checked", true)
        .on("click", function(d, i) {
            // register on click event
            var lVisibility = this.checked? "visible":"hidden";
            filterGraph(d, lVisibility);
        })
        d3.select(this).append("span")
          .text(function(d){return d;});
      });

      $("#sidebar").show();  // show sidebar
}

 // Method to filter graph
function filterGraph(aType, aVisibility)
{   
 // change the visibility of the node

    node.style("visibility", function(o) {
    var lOriginalVisibility = $(this).css("visibility");
    return o.type === aType ? aVisibility : lOriginalVisibility;
    }); 

///////////////////////////////////////////////////////////////////////// 隐藏链接所需的代码 ///////////////////////////////////////

}

Answer 1

您需要通过检查是否未选择其源或目标来隐藏链接。因此，在您的 filterGraph 部分中，添加类似的内容(假设您的链接具有 class="link"):

positive = ["Dahlia", "Tholomyes"];
link.attr("display", function (o) {

////Here the structure of the the link can vary, sometimes it is o["source"]["name"], sometimes it is o["source"]["name"], check it out before you fill in.
var source_name = o["source"]["id"];
var target_name = o["target"]["id"];

var result = positive.indexOf(source_name) != -1 && positive.indexOf(target_name) != -1 ? "auto" : "none"

return result;

});

以Mike Bostock的悲惨为例，我使用上面的代码过滤掉了所有其他的，除了连接“Dahlia”和“Tholomyes”的那一个。

这是您的 jsfiddle 示例的片段:

var hidden_nodes =[];
 // Method to filter graph
function filterGraph(aType, aVisibility)
{   
 // change the visibility of the node
 // if all the links with that node are invisibile, the node should also be invisible
// otherwise if any link related to that node is visibile, the node should be visible
// change the visibility of the connection link


    node.style("visibility", function(o) {
        var lOriginalVisibility = $(this).css("visibility");
        if (o.type == aType) {
            if (aVisibility == "hidden")
                {
                    hidden_nodes.push(o.name);
                }
            else
                {
                    index = hidden_nodes.indexOf(o.name);
                    if (index > -1) 
                    {
                        hidden_nodes.splice(index, 1);
                    }
                }
        }
        return o.type === aType ? aVisibility : lOriginalVisibility;

    }); 


    link.attr("display", function (o) {
    ////Here the structure of the the link can vary, sometimes it is o["source"]["name"], sometimes it is o["source"]["name"], check it out before you fill in.
    var source_name = o["source"]["name"];
    var target_name = o["target"]["name"];


    var result = hidden_nodes.indexOf(source_name) != -1 || hidden_nodes.indexOf(target_name) != -1 ? "none" : "auto"

    return result;

    });
}