Javascript 使用d3js计算二次SVG连接器的中点和曲线路径

我试图显示从左侧矩形到右侧矩形的连接。两侧的矩形是基于JSON中的值动态构造的。 目前，我已经在矩形的左端和右端放置了空div，并使用它作为参考来获得x，y坐标，并使用它来绘制二次SVG曲线。 当这项工作完成时，我想知道是否可以改进计算曲线路径的方法

SVG曲线的计算基于此处找到的答案 . 这是可行的，但我想知道d3js是否能在给定两点的情况下自动构造一个连接器。如果它能计算出中点，我相信连接会比我的计算更平滑

function x() {
    var p1x = parseFloat(document.getElementById("au").getAttribute("cx"));
    var p1y = parseFloat(document.getElementById("au").getAttribute("cy"));
    var p2x = parseFloat(document.getElementById("sl").getAttribute("cx"));
    var p2y = parseFloat(document.getElementById("sl").getAttribute("cy"));

    // mid-point of line:
    var mpx = (p2x + p1x) * 0.5;
    var mpy = (p2y + p1y) * 0.5;

    // angle of perpendicular to line:
    var theta = Math.atan2(p2y - p1y, p2x - p1x) - Math.PI / 2;

    // distance of control point from mid-point of line:
    var offset = 30;

    // location of control point:
    var c1x = mpx + offset * Math.cos(theta);
    var c1y = mpy + offset * Math.sin(theta);

    // show where the control point is:
    var c1 = document.getElementById("cp");
    c1.setAttribute("cx", c1x);
    c1.setAttribute("cy", c1y);

    // construct the command to draw a quadratic curve
    var curve = "M" + p1x + " " + p1y + " Q " + c1x + " " + c1y + " " + p2x + " " + p2y;
    var curveElement = document.getElementById("curve");
    curveElement.setAttribute("d", curve);
}

---

你的问题不清楚你想要多少控制点。如果您想创建具有拐点的链接，最合适的解决方案是使用D3

例如，假设您有以下数据：

const data = [{x: 20, y: 20}, {x: 280, y: 130}];

您可以使用如下链接生成器：

const linkGenerator = d3.linkHorizontal()
  .x(d => d.x)
  .y(d => d.y)
  .source(d => d[0])
  .target(d => d[1]);

下面是一个演示：

const数据=[{
x:20，
y:20
}, {
x:280，
y:130
}];
const svg=d3.选择（“svg”）；
const linkGenerator=d3.linkHorizontal（）
.x（d=>d.x）
.y（d=>d.y）
.source（d=>d[0]）
。目标（d=>d[1]）；
const circles=svg.selectAll（空）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“r”，10）
.attr（“cx”，d=>d.x）
.attr（“cy”，d=>d.y）；
const link=svg.append（“路径”）
.style（“填充”、“无”）
.style（“笔划”、“黑色”）
.attr（“d”，链接生成器（数据））

@John你没有足够的分数来投票。不过还是要谢谢你！这是有效的，在第二种情况下生成的图（创建随机点）与我想要实现的类似。在项目中实现此功能的缺点是我必须使用d3 v4.60，而lineGenerator不受支持。我试着在这里查看d3.line（），但在实现linkGenerator（）函数的功能方面没有进展。任何建议都会有帮助。感谢you@John在评论部分回答这个问题是不可能的。我建议你把这个作为一个新问题发布。