Javascript D3力布局-图例交互打开/关闭

我有一个带有图例的force布局，并且在图例中的每个角色上都添加了复选框。 我尝试按照这个示例（）向图例中添加交互性，但是当我取消选中任何复选框时，所有链接都会消失，而不是与角色相关的链接和节点。 我正在用这个循环创建图例

var col = color(d.group);
                   // adding code to display legend
                  // as nodes are filled
                  if(!(d.role in roles)){
                      legend.append("li")
                            .html(d.role)
                            .style("color", col)
                            //add checkbox
                            .append("input")
                            .attr("type", "checkbox")
                            .attr("id", function (d){
                                return "chk_" + d;
                            })
                            //check box
                            .property("checked", true)
                            .on("click", function (d){
                                //click event
                                var visibility = this.checked? "visible" : "hidden";
                                filterLegend(d,visibility);
                            })

                        roles[d.role] = true;
                    }

                  return col; })

这是我的一张图表（），使用了大量数据，所以只使用了一个小样本。（图表不会显示在fiddle上，但会保留链接，以便查看完整代码）

下面是更改可见性的代码

function filterLegend(aType, aVisibility){
                    //change vis of link
                    link.style("visibility", function (o) {
            var lOriginalVisibility = $(this).css("visibility");
            return o.type === aType ? aVisibility : lOriginalVisibility;
        });
                //change vis of node
                //if links of node invisible, node should be too
                node.style("visibility", function (o, i) {
                    var lHideNode = true;
                    link.each(function (d, i) {
                        if (d.source === o || d.target === o) {
                            if ($(this).css("visibility") === "visible") {
                        lHideNode = false;

                            }
                        }
                    })
                });

              } //end filter

---

要明确的是，我想要实现的是——当我取消选中某个角色（例如演员）时，所有节点和链接都会消失。任何提示都将不胜感激：）

您的代码中有一些错误。首先，您没有将任何数据绑定到图例元素，因此

.on（“单击”，函数（d）{}

将不起作用，因为那里没有定义

d

。不过，您确实有

d.role

，因此您应该使用它来传递函数

类似地，您的

filterLegend（）

函数引用未定义的内容（

.type

）——这就是此时一切都消失的原因。您正在传入未定义的内容，并将其与未定义的内容进行比较，从而得到

true

。此外，链接没有直接的节点信息，而是在

.source

和

.target

下，因此您需要与

.source.role

和

.target.role

进行比较

另一方面，对于节点，这比您当前的代码要简单得多——不需要迭代链接。除了与现有的

.role

属性（而不是不存在的

.type

）进行比较外，您可以使用此处链接的代码

---

完整的演示。

我已经做了一些更改，以实现我认为您想要的功能--我不完全确定，因为代码所做的与您在这里描述的完全不同。