javascript - 隐藏多个json d3组

Question

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

输入.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";
              })

这就是我正在寻找的东西，只是此代码不起作用。我也尝试将其设为两种不同的样式

Answer 1

在三元运算符中，在检查 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 语句依次执行，但您可以使用分支将代码执行定向到一个返回或另一个返回。如果您想要有多个选项，我不会推荐使用三元运算符，因为它会变得又长又困惑，但您可以使用常规的 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";
  }
});

希望有帮助!