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

// 创建SVG容器
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

// 创建起始点和终点
var startPoint = { x: 100, y: 100 };
var endPoint = { x: 400, y: 400 };

svg.append("circle")
  .attr("cx", startPoint.x)
  .attr("cy", startPoint.y)
  .attr("r", 5)
  .style("fill", "red");

svg.append("circle")
  .attr("cx", endPoint.x)
  .attr("cy", endPoint.y)
  .attr("r", 5)
  .style("fill", "blue");

// 计算中点
var midPoint = {
  x: (startPoint.x + endPoint.x) / 2,
  y: (startPoint.y + endPoint.y) / 2
};

// 创建曲线路径
var curvePath = d3.path();
curvePath.moveTo(startPoint.x, startPoint.y);
curvePath.quadraticCurveTo(midPoint.x, midPoint.y, endPoint.x, endPoint.y);

// 绘制连接器
svg.append("path")
  .attr("d", curvePath)
  .style("fill", "none")
  .style("stroke", "black")
  .style("stroke-width", 2);