Javascript D3力定向图-过滤器节点和关联链接

我尝试在力定向图上使用的过滤器有问题。我可以过滤掉节点，但不能使关联的链接消失。我对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;
    }); 

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

}

---

您需要通过检查是否未选择其源或目标来隐藏链接。因此，在filterGraph部分中，添加如下内容（假设您的链接具有class=“link”）：

以迈克·博斯托克的《悲惨》为例，我用上面的代码过滤掉了所有其他的代码，除了连接“Dahlia”和“Tholomyes”的代码

以下是JSFIDLE示例的代码片段：

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;

    });
}

---

我可以想象你需要一些调整，使我的代码在你的脚本工作。你能告诉我错误并显示你的“.link”创建代码吗？我猜你是在拿迈克的悲惨例子bl.ocks.org/mbostock/4062045？我已经编辑了我的代码，您需要正片=[“Dahlia”，“Tholomyes”]行“正片=[“Dahlia”，“Tholomyes”]”只是Mike示例中的一个演示。在任何情况下，都需要告诉“显示”设置器显示了哪些节点。就我而言，我要求它检查我的“阳性”。使“积极”全局，修改您的过滤器部分填写“积极”列表，其余将由我的代码完成。要恢复链接，当您取消选中复选框时，只需执行“link.attr（“display”，“auto”）；”操作。如果（o.type==aType）{positive.push（o.id）；}您好，您只需进一步了解逻辑即可。现在我已经更正了它，并在上面的回答中发布了解决方案。用我的代码片段替换你的代码片段。顺便说一下，通过隐藏一些节点，其他一些节点将变得不连接。例如，如果AA1仅连接到AA2，反之亦然。现在，如果隐藏AA1，我的函数也将隐藏它们之间的连接，从而使AA2成为一个孤立的节点。

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;

    });
}