You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

在D3力导向图中计算曲线路径链接的控制点

D3力导向图曲线路径链接控制点问题

我在D3中实现了一个力导向图,尝试使用path元素在两个圆形节点之间创建符合预期样式的曲线路径,预期路径样式如下:
预期路径

同时要求拖拽节点时,路径在变宽或变窄的过程中保持原有结构,示例如下:
加宽路径
不同方向路径

我已获取到节点正确的x/y坐标,但难以找到合适的控制点来实现上述需求。

当前尝试的代码如下:

const controlPoint1X = sourceX + (targetX - sourceX) / 2;
const controlPoint1Y = sourceY + 20;
const controlPoint2X = targetX - (targetX - sourceX) / 2;
const controlPoint2Y = targetY - 60;

// Create the curve
return curve([
    [sourceX, sourceY],
    [controlPoint1X, controlPoint1Y],
    [controlPoint2X, controlPoint2Y],
    [targetX, targetY]
]);

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.03 02:12:10