使用d3-dag 0.11.1中curveBumpX/curveBumpY返回undefined问题求助

可能原因 #

• 未导入依赖的d3-shape模块：curveBumpX和curveBumpY不属于d3-dag的内置API，它们是d3-shape库提供的曲线插值器。仅导入d3-dag时，运行环境中不存在这些函数，即便IDE自动补全能识别类型定义，调用后仍会返回undefined。
• 调用方式不正确：d3-dag的边连接生成器（如linkHorizontal()、linkVertical()）需要通过.curve()方法传入曲线插值器，而非直接调用curveBumpX/curveBumpY。错误的直接调用会导致返回undefined。

解决示例 #

ES模块环境 #

// 同时导入d3-dag的链接生成器和d3-shape的曲线函数
import { linkHorizontal } from 'd3-dag';
import { curveBumpX } from 'd3-shape';

// 正确创建带BumpX曲线的边生成器
const linkGenerator = linkHorizontal().curve(curveBumpX);

UMD脚本环境 #

<!-- 先引入d3-shape，再引入d3-dag -->
<script src="https://cdn.jsdelivr.net/npm/d3-shape@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-dag@0.11.1"></script>

<script>
// 使用d3-dag的链接生成器并绑定curveBumpX
const linkGenerator = d3Dag.linkHorizontal().curve(d3.curveBumpX);
</script>

d3-dag的链接生成器与d3原生的link生成器API兼容，只要正确导入d3-shape的曲线函数并通过.curve()方法传入，即可正常生成带curveBumpX/curveBumpY曲线的边连接。

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