D3.js力导向图点击父节点隐藏关联子节点时map报错如何解决

报错原因 #

你代码中调用filter的link变量是D3的DOM选择集对象，不是原生JavaScript数组，调用filter方法后返回的仍然是D3选择集实例，没有数组原生的map方法，因此触发newLinks.map is not a function报错。

修复&功能实现 #

直接从原始的data.links数据数组中过滤关联连线，再匹配对应子节点，同时支持点击切换显隐状态，修改后的onClick函数如下：

function onClick(event, d) {
  // 仅父节点点击触发逻辑，过滤子节点点击事件
  if (d.type !== 'parent') return

  // 从原始数据中过滤所有目标为当前点击父节点的连线
  const relatedLinks = data.links.filter(link => {
    const targetId = typeof link.target === 'string' ? link.target : link.target.id
    return targetId === d.id
  })
  // 提取关联子节点的ID
  const childNodeIds = relatedLinks.map(link => {
    return typeof link.source === 'string' ? link.source : link.source.id
  })

  // 切换关联子节点显隐状态
  node.filter(n => childNodeIds.includes(n.id))
    .style('display', item => item.hidden ? 'block' : 'none')
    .each(item => item.hidden = !item.hidden)

  // 切换对应关联连线的显隐状态
  link.filter(l => {
    const sourceId = typeof l.source === 'string' ? l.source : l.source.id
    const targetId = typeof l.target === 'string' ? l.target : l.target.id
    return childNodeIds.includes(sourceId) && targetId === d.id
  })
    .style('display', item => item.hidden ? 'block' : 'none')
    .each(item => item.hidden = !item.hidden)
}

可选优化 #

如果需要隐藏节点后力导向图重新计算布局、消除隐藏节点占位，可以在每次显隐切换后，过滤掉隐藏的节点和连线，重新更新力模拟数据并重启：

// 在onClick函数末尾添加以下代码
const visibleNodes = data.nodes.filter(n => !n.hidden)
const visibleLinks = data.links.filter(l => !l.hidden)
force.nodes(visibleNodes)
  .force("link").links(visibleLinks)
force.alpha(0.3).restart()

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