如何在D3.js中实现按年龄过滤节点及对应边的无向固定图

Hey，我来帮你搞定这个D3.js的过滤需求！要实现点击复选框展示特定年龄节点及它们之间的链接，核心就是先过滤节点，再匹配对应链接，然后用D3的enter/update/exit模式更新视图。下面是具体的实现思路和代码示例：

• 监听复选框的change事件，获取选中的年龄条件
• 根据年龄过滤出符合条件的节点集合
• 过滤链接：只保留那些两端节点都在过滤后集合里的链接（要注意D3中链接的source/target可能是对象或原始索引）
• 用D3的更新机制重新渲染节点、链接和文本

假设我们已经有了节点和链接的原始数据，以及基础的SVG画布：

// 原始节点数据（包含预设的固定坐标x/y）
const nodes = [
  {id: 1, name: 'Chris', age: 23, x: 100, y: 150},
  {id: 2, name: 'tina', age: 23, x: 200, y: 100},
  {id: 3, name: 'Jack', age: 25, x: 300, y: 150},
  {id: 5, name: 'Mary', age: 23, x: 150, y: 250},
  {id: 6, name: 'ronaldo', age: 23, x: 250, y: 250},
  {id: 9, name: 'cs', age: 23, x: 180, y: 180},
  {id: 7, name: 'Someone', age: 25, x: 350, y: 200}
];

// 原始链接数据（这里source/target存的是节点id，也可以是索引）
const links = [
  {source: 7, target: 1, value: '1'},
  {source: 9, target: 1, value: '1'},
  {source: 5, target: 2, value: '1'},
  {source: 3, target: 7, value: '1'}
];

// 初始化节点id映射，方便快速查找
const nodeIdMap = new Map(nodes.map(d => [d.id, d]));

// 监听年龄23的复选框事件
document.getElementById('age-23-checkbox').addEventListener('change', function(e) {
  const isChecked = e.target.checked;
  let filteredNodes, filteredLinks;

  if (isChecked) {
    // 第一步：过滤出年龄为23的节点
    filteredNodes = nodes.filter(node => node.age === 23);
    // 把有效节点的id存进Set，方便快速判断
    const validNodeIds = new Set(filteredNodes.map(node => node.id));
    
    // 第二步：过滤链接，只保留两端节点都在有效集合里的
    filteredLinks = links.filter(link => {
      // 处理source/target是id或对象的两种情况
      const sourceId = typeof link.source === 'object' ? link.source.id : link.source;
      const targetId = typeof link.target === 'object' ? link.target.id : link.target;
      return validNodeIds.has(sourceId) && validNodeIds.has(targetId);
    });
  } else {
    // 未勾选时展示所有节点和链接
    filteredNodes = [...nodes];
    filteredLinks = [...links];
  }

  // 更新链接元素
  const linkSelection = d3.select('#links-group')
    .selectAll('line')
    .data(filteredLinks);

  // 移除不需要的链接
  linkSelection.exit().remove();

  // 添加新链接并更新现有链接的位置
  linkSelection.enter()
    .append('line')
    .merge(linkSelection)
    .attr('x1', d => nodeIdMap.get(typeof d.source === 'object' ? d.source.id : d.source).x)
    .attr('y1', d => nodeIdMap.get(typeof d.source === 'object' ? d.source.id : d.source).y)
    .attr('x2', d => nodeIdMap.get(typeof d.target === 'object' ? d.target.id : d.target).x)
    .attr('y2', d => nodeIdMap.get(typeof d.target === 'object' ? d.target.id : d.target).y)
    .style('stroke', '#999')
    .style('stroke-width', d => d.value);

  // 更新节点元素
  const nodeSelection = d3.select('#nodes-group')
    .selectAll('circle')
    .data(filteredNodes);

  nodeSelection.exit().remove();

  nodeSelection.enter()
    .append('circle')
    .merge(nodeSelection)
    .attr('cx', d => d.x)
    .attr('cy', d => d.y)
    .attr('r', 12)
    .style('fill', '#4CAF50');

  // 更新节点文本标签
  const labelSelection = d3.select('#labels-group')
    .selectAll('text')
    .data(filteredNodes);

  labelSelection.exit().remove();

  labelSelection.enter()
    .append('text')
    .merge(labelSelection)
    .attr('x', d => d.x + 15)
    .attr('y', d => d.y + 5)
    .text(d => d.name)
    .style('font-size', '12px');
});

• 因为是固定图，确保节点数据里已经预设了x和y坐标，这样过滤后节点位置不会乱
• 如果你的链接是通过D3力导向图生成的（source/target是节点对象而非id），记得在过滤和更新时取source.id和target.id来匹配
• 要是需要支持多个年龄复选框，只需要把固定的23换成复选框的value值，就能实现动态匹配不同年龄
• 可以根据需求添加额外交互，比如选中时给节点加高亮样式，提升用户体验

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