Javascript 隐藏多个json d3组

我有一个包含多个组的json文件：

input.json：

{
"nodes": [
    {
        "name": "Q1",
        "group": 2
    },
    {
        "name": "Aliens",
        "group": 1
    },
    {
        "name": "Government",
        "group": 1
    },
    {
        "name":"Corporate",
        "group": 1
    },
    {
        "name":"Creatures",
        "group": 1
    },
    {
        "name":"Religion",
        "group": 1
    },
    {
        "name": "Q2",
        "group": 4
    },
    {
        "name": "Q2",
        "group": 3
    }
],
"links": [
    {
        "source": 0,
        "target": 1,
        "value": 2
    },
    {
        "source": 0,
        "target": 2,
        "value": 2
    },
    {
        "source": 0,
        "target": 3,
        "value": 2
    },{
        "source": 0,
        "target": 4,
        "value": 2
    },{
        "source": 0,
        "target": 5,
        "value": 2
    },
    {
        "source": 0,
        "target": 6,
        "value": 2
    },
    {
        "source":1,
        "target":6,
        "value": 2
    },
    {
        "source":2,
        "target":6,
        "value": 2
    }
]
}

目前，我有以下代码隐藏组的节点：

var node = svg.selectAll(".node")
              .data(graph.nodes)
              .enter()
              .append("circle")
              .attr("class", "node")
              .attr("r", 20)
              .style("fill","black")
              .call(force.drag)
              .style("visibility", function(d) {
                return d.group == 1 ? "hidden" : "visible";
              })
              .on("mouseover", function(d) {
                node.style("fill", function(d) { return color(d.group); })
              })
              .on("click", function(d) {
                if(d.group == 2) {
                  node.filter(function(d) { return d.group == 1; }).style("visibility", "visible");
                  link.filter(function(d) { return d.value == 2; }).style("visibility", "visible");
                   texts.filter(function(d) { return d.group == 1; }).style("visibility", "visible");
                }
              }).on("mouseout", function(d) {
               node.style("fill","black")
            });

我想隐藏除标记为“Q2”的节点之外的所有节点。我尝试添加第二个.style属性，但不起作用。我不知道我该怎么办。非常感谢您的帮助

更新

.style("visibility", function(d) {
                return d.group == 1 ? "hidden" : "visible";return d.group == 4 ? "hidden" : "visible";
              })

---

这就是我要找的，除了这段代码不起作用。我试着在你的三元运算符中把它分成两种不同的样式，在你检查

d.group==1之前，你可以检查
d.name！='Q2’
类似于：

var node = svg.selectAll(".node")
              .data(graph.nodes)
              .enter()
              .append("circle")
              .attr("class", "node")
              .attr("r", 20)
              .style("fill","black")
              .call(force.drag)
              .style("visibility", function(d) {
                return d.name !== 'Q2' ? "hidden" : "visible";
              })
              .on("mouseover", function(d) {
                node.style("fill", function(d) { return color(d.group); })
              })
              .on("click", function(d) {
                if(d.group == 2) {
                  node.filter(function(d) { return d.group == 1; }).style("visibility", "visible");
                  link.filter(function(d) { return d.value == 2; }).style("visibility", "visible");
                   texts.filter(function(d) { return d.group == 1; }).style("visibility", "visible");
                }
              }).on("mouseout", function(d) {
               node.style("fill","black")
            });

--编辑--

既然您询问了如何使用多个组，那么您也可以考虑使用多个组。不能让多个return语句一个接一个地执行，但可以使用分支将代码执行定向到一个或另一个return。如果您想要有多个选项，我不推荐使用三元运算符，因为它会变得冗长和混乱，但是您可以使用常规if-else分支来完成它。例如：

.style("visibility", function(d) {
  if (d.group === 1 || d.group === 4) {
    return "hidden";
  } else {
    return "visible"
  }
});

|
运算符是逻辑OR。在伪代码中，以上仅表示：

如果d.group等于1或d.group等于4，则返回“隐藏”，否则返回“可见”

如果这看起来令人困惑，您还可以更明确地指出：

.style("visibility", function(d) {
  if (d.group === 1) {
    return "hidden";
  } 
  else if (d.group === 4) {
    return "hidden";
  }
  else {
    return "visible";
  }
});

希望有帮助
 我可以使用多个
名称吗？