d3力导向图隐藏节点和连线

在 d3.js 中，要隐藏节点和连线，可以通过修改它们的 CSS 属性来实现。具体来说，可以设置节点和连线的 `display` 属性为 `none`，这样它们就不会被显示出来了。

以下是一个简单的示例代码，演示如何隐藏节点和连线：

// 定义节点和连线的数据
var nodes = [{id: 1}, {id: 2}, {id: 3}];
var links = [{source: 1, target: 2}, {source: 2, target: 3}];

// 创建力导向图
var svg = d3.select("svg");
var simulation = d3.forceSimulation(nodes)
  .force("link", d3.forceLink(links))
  .force("charge", d3.forceManyBody());

// 绘制节点和连线
var link = svg.selectAll(".link")
  .data(links)
  .enter().append("line")
  .attr("class", "link");

var node = svg.selectAll(".node")
  .data(nodes)
  .enter().append("circle")
  .attr("class", "node");

// 定义隐藏节点和连线的函数
function hide() {
  node.style("display", "none");
  link.style("display", "none");
}

// 定义显示节点和连线的函数
function show() {
  node.style("display", null);
  link.style("display", null);
}

// 在点击按钮时隐藏节点和连线
d3.select("#hide-button").on("click", hide);

// 在点击按钮时显示节点和连线
d3.select("#show-button").on("click", show);

在上面的代码中，我们定义了两个函数 `hide()` 和 `show()`，分别用于隐藏和显示节点和连线。在点击按钮时，我们调用这些函数来隐藏或显示节点和连线。节点和连线的 CSS 样式可以在 CSS 文件中定义。