D3.js Hierarchical Edge Bundling 如何将曲边修改为直边

我尝试修改D3.js 层级边捆绑（Hierarchical Edge Bundling）官方示例代码，目标是把默认渲染的曲边替换为直边。

最初的修改方案是将原有的径向曲线生成代码：

line = d3.lineRadial()
    .curve(d3.curveBundle.beta(0.85))
    .radius(d => d.y)
    .angle(d => d.x)

直接替换为普通直线生成代码：

line = d3.line()
    .x(d => d.x)
    .y(d => d.y)

修改后没有得到预期的直边渲染效果，该方案遗漏了关键配置与操作步骤。

• 坐标系不匹配：原示例使用径向环形布局，节点属性d.x、d.y存储的是极坐标参数：d.x为弧度制角度，d.y为到圆心的径向距离，并非SVG/Canvas使用的直角坐标系x、y像素值，直接传入普通直线生成器必然渲染异常。
• 坐标转换修正：如果要保留原有的环形布局，需要先将极坐标转换为直角坐标再传入直线生成器，转换时需要对齐D3径向布局默认的0弧度在12点钟方向的规则，修正后的直线生成器代码如下：

const line = d3.line()
  .x(d => d.y * Math.cos(d.x - Math.PI / 2))
  .y(d => d.y * Math.sin(d.x - Math.PI / 2))

• 路径输入点修正：原曲边逻辑依赖d3.curveBundle对边两端点之间沿层级树生成的完整中间点序列做平滑处理；绘制直边时不需要传入这些中间路径点，只需要传入每条边的起点、终点两个节点的坐标即可，要跳过原逻辑中沿树生成中间路径点的步骤。
• 布局适配（可选）：如果不需要保留环形布局，想实现普通直角坐标系下的直边效果，需要把原示例的径向集群布局替换为普通树/集群布局，去掉size([2 * Math.PI, 半径])的径向配置，此时节点的d.x、d.y本身就是直角坐标像素值，可以直接传给d3.line()使用。

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