努力在 D3 中使用贝塞尔曲线实现连接器路径答案

【问题标题】：Struggling to implement connector paths with bezier in D3努力在 D3 中使用贝塞尔曲线实现连接器路径
【发布时间】：2021-03-16 16:22:35
【问题描述】：

我正在尝试使用 D3 创建一个粗略的数据库图表生成器，但我不知道如何在字段之间获取连接器。我可以从两点得到直线，但我希望它是圆形的，并且像我猜的路径。

我试图将这个特定问题的示例放在一起，链接两个文本字段：

https://codesandbox.io/s/gifted-bardeen-5hbw2?fontsize=14&hidenavigation=1&theme=dark

这是我所指的来自 dbdiagram.io 的示例：

我一直在阅读 d 属性和各种命令，但似乎没有什么比这更接近了。我怀疑forceSimulation 方法，尤其是forceCenter 函数在我使用小写命令时可能会弄乱相对定位。但不是 100%。

【问题讨论】：

This 可能有用（注意：sn-ps 使用通过将 x 坐标交换为 y 坐标来旋转的树形图，反之亦然，一开始可能会有点混乱)

标签： javascript svg d3.js

【解决方案1】：

您可以通过 connectorPath 例程计算 2 个点之间的连接器路径：

const source = {x: 200, y: 120};
const target = {x: 50, y: 20};
const MAX_RADIUS = 15;

const connectorPath = (from, to) => {
    if (from.y === to.y || from.x === to.x) 
    return `M ${from.x},${from.y} L ${to.x},${to.y}`;
    
    const middle = (from.x + to.x) / 2;
  const xFlag = from.x < to.x ? 1 : -1;
  const yFlag = from.y < to.y ? 1 : -1;
  const dX = Math.abs(from.x - to.x);
  const dY = Math.abs(from.y - to.y);
  const radius = Math.min(dX / 2, dY / 2, MAX_RADIUS);
  return `M ${from.x},${from.y} H ${middle - radius * xFlag} Q ${middle},${from.y} ${middle},${from.y + radius * yFlag} V ${to.y - radius * yFlag} Q ${middle},${to.y} ${middle + radius * xFlag},${to.y} H ${to.x}`;
};

d3.select('#source').attr('cx', source.x).attr('cy', source.y);
d3.select('#target').attr('cx', target.x).attr('cy', target.y);
d3.select('#connector').attr('d', connectorPath(source, target));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="300" height="200">
  <path id="connector" stroke="blue" fill="none" />
  <circle id="source" fill="red" r="5"/>
  <circle id="target" fill="green" r="5"/>
</svg>

【讨论】：