javascript - d3.js动态设置节点可见性

Question

在 d3.js 中，我有一个具有不同节点的强制布局。所有这些不同的节点都是不同组的一部分。对于每一组，我都有一个“ super 节点”，我想代表所有普通节点。这就是我定义节点的方式:

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

我有一个按钮，当我单击该按钮时，我想在显示 super 节点和隐藏节点之间切换，反之亦然。我用一个名为“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();
            });

现在，当您看到定义节点的代码时，我已经注释掉了样式。这样它就可以正常工作，单击按钮即可切换节点。然而，通过这种方式，当我启动页面时，所有节点，普通节点和 super 节点都是可见的。我希望在启动时只有普通节点可见(正如您可以通过查看注释掉的nodeEnter.style 看出的那样)。如果我取消这部分代码的注释，它就不再起作用。

Answer 1

我在您的代码中发现的问题如下。

• 有一个错误的分号，例如 .attr("height", 50);.style(...，这可能是一个拼写错误。

• 您应该隐藏节点组元素，而不是单独隐藏图像。

试试这个方法。

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