Question

我有一个包含多个组的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";
              })

这是我正在寻找的，除了这段代码不起作用。我试着把它分成两种不同的风格

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，则返回“hidden”，否则返回“visible”

如果这看起来令人困惑，你也可以更明确地把它画出来：

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

希望有所帮助！

隐藏多个json d3组

1 个答案: