D3.js Mobile Patent Suits示例：如何编写点击移除节点的mouseclick函数？

嘿，刚好我对这个示例挺熟悉的！要实现点击节点移除的功能，你需要同时处理数据更新和可视化元素更新，还要让力导向图重新布局。下面是具体的实现步骤和代码：

核心思路 #

D3的可视化是数据驱动的，所以移除节点不能只删掉DOM元素，还要同步修改背后的节点/链接数据，最后通知力模拟更新并重新计算布局。

完整的mouseclick函数代码 #

假设你用的是D3 v4+版本（Mobile Patent Suits的现代版本一般用这个），函数可以这么写：

function mouseclick(event, d) {
  // 1. 从节点数组中移除当前被点击的节点
  nodes = nodes.filter(node => node !== d);
  
  // 2. 移除所有和该节点关联的链接（不管是源节点还是目标节点）
  links = links.filter(link => {
    // 注意：如果你的链接里source/target是对象引用，直接比较就行；如果是索引，要改成比较id或者索引值
    return link.source !== d && link.target !== d;
  });
  
  // 3. 更新节点的可视化：绑定新数据后，移除退出的节点元素
  node.data(nodes).exit().remove();
  
  // 4. 更新链接的可视化：同样绑定新数据，移除退出的链接元素
  link.data(links).exit().remove();
  
  // 5. 更新力模拟的数据源，重启模拟让布局重新收敛
  simulation.nodes(nodes); // 告诉模拟新的节点数组
  simulation.force("link").links(links); // 更新链接力的数据源
  simulation.alpha(0.3).restart(); // 重置alpha值，让模拟重新活跃起来调整布局
}

注意事项 #

• 如果你的D3版本是v3，API会有点不一样：力模拟对象叫force而不是simulation，事件回调里第一个参数是数据d，第二个才是事件，所以函数要改成function mouseclick(d) { ... }，对应的力模拟更新代码是force.nodes(nodes); force.links(links); force.start();
• 确保你的nodes和links变量是全局或者在函数范围内可访问的，不然没法修改数据
• 如果你的链接数据里source和target是节点的索引而不是对象引用，那过滤链接的时候要改成比较节点的id或者对应的索引值，比如：link.source.id !== d.id && link.target.id !== d.id

这样点击节点之后，不仅节点会消失，相关的链接也会被移除，剩下的节点会自动重新调整位置，符合力导向图的布局逻辑~

内容的提问来源于stack exchange，提问作者Bigjo