Angular实现D3可折叠力导向图遇API兼容问题求助

你遇到的所有问题都是因为参考的示例基于D3 v3，而你当前使用的是D3 v6+版本，API有大幅变更，下面逐个解决：

1. d3.tree().links(nodes) 报错 #

旧版d3.tree().links()的API在新版中已调整，需先通过树布局计算节点结构，再生成链接：

// 假设root是你的根数据节点
const treeLayout = d3.tree();
// 先计算树的节点层次与位置
treeLayout(root);
// 通过根节点的descendants()获取所有节点，再生成链接
const links = treeLayout.links(root.descendants());

2. d3.layout.force() 找不到布局模块 #

D3 v4+已移除d3.layout.force，改用d3.forceSimulation重构力导向逻辑，替代代码如下：

// 初始化力导向模拟，传入节点数组
const simulation = d3.forceSimulation(nodes)
  // 添加链接力，需传入links数组，指定节点id用于匹配
  .force("link", d3.forceLink(links).id(d => d.id))
  // 添加电荷斥力（节点间相互排斥）
  .force("charge", d3.forceManyBody())
  // 添加居中力，将整体布局拉到画布中心
  .force("center", d3.forceCenter(width / 2, height / 2))
  // 绑定tick事件回调
  .on("tick", tick);

3. d3.event 报错 #

D3 v6+移除了全局d3.event，事件对象直接作为事件处理函数的第一个参数传入，示例调整：

// 拖拽开始事件
function dragstarted(event, d) {
  if (!event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

// 拖拽中事件
function dragged(event, d) {
  d.fx = event.x;
  d.fy = event.y;
}

// 拖拽结束事件
function dragended(event, d) {
  if (!event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

// 绑定拖拽事件时无需改动，函数会自动接收event参数
d3.selectAll(".node").call(
  d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended)
);

额外注意事项 #

• 确保Angular项目已正确安装D3及类型定义：

  npm install d3 @types/d3 --save
  

• 组件中可按需导入D3模块（或全局导入），示例：

  import * as d3 from 'd3';
  

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