D3 强制布局 - 图例交互性开/关答案

【问题标题】：D3 force layout - legend interactivity on/offD3 强制布局 - 图例交互性开/关
【发布时间】：2015-05-25 17:56:33
【问题描述】：

我有一个带有图例的强制布局，并且我已将复选框附加到图例中的每个角色。我正在尝试按照这个示例 (https://jsfiddle.net/zhanghuancs/cuYu8/) 并为图例添加交互性，但是当我取消选中任何复选框时，所有链接都会消失，而不是与角色相关的链接和节点。我正在使用这个循环创建图例，

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

这是我的图表 (https://jsfiddle.net/gbhrea/077mb7o1/1/) 的一个小提琴，它使用了大量数据，所以只使用了一个小样本作为小提琴。（图表不会显示在小提琴上，但无论如何都会保留链接，以便可以看到完整的代码）

这是更改可见性的代码

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

明确地说，我想要实现的是 - 当我取消选中一个角色时，例如 Actor，所有节点和链接都会消失。任何指针将不胜感激:)

【问题讨论】：

我已经进行了更改以实现我认为您想要的 here - 我不完全确定，因为代码所做的事情与您在此处描述的完全不同。跨度>

标签： javascript d3.js

【解决方案1】：

您的代码中有一些错误。首先，您没有将任何数据绑定到图例元素，因此.on("click", function (d) { }) 将不起作用，因为d 没有在那里定义。不过你确实有d.role，所以你应该使用它来传递给函数。

同样，您的filterLegend() 函数引用了未定义的事物（.type）——这就是为什么现在一切都消失了。您传入未定义的内容并将其与未定义的内容进行比较，从而得到true。另外，链接没有直接有节点信息，而是在.source和.target下，所以需要对比.source.role和.target.role。

另一方面，对于节点，它比您当前的代码尝试做的要容易得多——无需遍历链接。除了与现有的.role 属性而不是不存在的.type 进行比较之外，您可以使用此处的链接代码。

完整的演示here。

【讨论】：