Question

我有一个带图例的力布局，并且我在图例中为每个角色添加了复选框。我正在尝试按照此示例（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，所有节点和链接都会消失。任何指针都将非常感激：）

Answer 1

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

同样，你的filterLegend()函数引用未定义的东西（.type） - 这就是为什么一切都在消失的原因。你传递了一些未定义的东西并将它与未定义的东西进行比较，这给出了true。此外，链接不能直接获得节点信息，但在.source和.target下，您需要与.source.role和.target.role进行比较。

另一方面，对于节点来说，它比当前代码尝试的要容易得多 - 没有必要迭代链接。除了与现有的.role属性进行比较而不是与现有的.type进行比较之外，您可以使用此处的链接代码。

完整演示here。

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

1 个答案: