动态设置节点可见性

Question

在d3.js中，我有一个具有不同节点的力布局。所有这些不同的节点都属于不同的组。对于每个组，我有一个“超级节点”，我想表示所有的正常节点。我是这样定义节点的：

//Nodes are defined.
            var node = g.selectAll(".node")
                .data(nodes);

            var nodeEnter = node.enter().append("g")
                .attr("class", "node");



            //Image is added for each node, depending on what type it is.
            nodeEnter.append("image")
                .attr("xlink:href", function(d) {
                    if (d.id == "supernode") {
                        return "../icons/supernodes/" + d.type + ".png";
                    } else {
                        return "../icons/" + d.type + ".png";
                    }
                })
                .attr("x", -25)
                .attr("y", -25)
                .attr("width", 50)
                .attr("height", 50);
                // .style("visibility", function(d) {          
                //     return d.id == "supernode" ? "hidden" : "visible";
                // });

我有一个按钮，当我点击的时候，我想在显示超级节点和隐藏节点之间切换，反之亦然。我检查一个叫"superNodeShown“的bool应该发生哪一个。我有一种方法可以切换可见度：

        var superNodeShown = false;
        function bundleNodes() {
                console.log("before",node);
                if (!superNodeShown){
                        node.style("visibility", function(d) {

                        if (d.id =="supernode") return "visible";
                        else return "hidden";

                    });
                }
                else{
                    node.style("visibility", function(d) {

                        if (d.id =="supernode") return "hidden";
                        else return "visible";
                    });
                }
                superNodeShown = !superNodeShown;

                console.log("after",node);
            }

            //button click event
            d3.select('#buttonTest').on('click', function() {

                bundleNodes();
            });

现在，当您看到定义节点的代码时，我已经注释掉了样式。这样就可以很好地工作，节点可以在按钮点击时切换。但是，以这种方式，当我启动页面时，所有节点都是可见的，正常节点和超级节点都是可见的。我希望在开始时只有普通节点是可见的(可以通过查看注释掉的nodeEnter.style来判断)。如果我取消了这部分代码的注释，它就不再工作了。

Answer 1

我可以在您的代码中找到以下问题。

• 有一个错误的分号像这个.attr("height", 50);.style(...，这可能是一个错误的错误。
• 您应该隐藏节点组元素，而不是单独隐藏图像。

试试这边。

nodeEnter.style("visibility", function(d) {          
    return d.id == "supernode" ? "hidden" : "visible";
});