Question

在d3.js中，我有一个不同节点的力布局。所有这些不同的节点都是不同组的一部分。对于每个组，我有一个＆＃34;超级节点＆＃34;我想表示所有正常节点。这就是我定义节点的方式：

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

我有一个按钮，当我点击我想在显示超级节点和隐藏节点之间切换，反之亦然。我用一个名为＆＃34; superNodeShown＆＃34;的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";
});

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

1 个答案: