Html 如何创建自定义SVG路径？

我正在使用这段代码创建一条弯曲的SVG路径

const bezierWeight = 0.6;
var boxPath = document.getElementById("boxPath_"+edge.id);
var x1 = edge.x1;
var y1 = edge.y1;
var x4 = edge.x4;
var y4 = edge.y4;
var dx = (x4 - x1) * bezierWeight;
var x2 = x1 - dx;
var x3 = x4 + dx;
var boxData = `M${x1} ${y1} C ${x2} ${y1} ${x3} ${y4} ${x4} ${y4}`;
boxPath.setAttribute("d", boxData);

其中x1、y1和x4、y4是我想要SVG路径的两点。 这给了我这个

但我想要这样的东西

如何做到这一点？

getCubicBezierPath正是您所需要的：

常数from={x:20，y:20}； 常数to={x:150，y:100}； 常量getCubicBezierPath=p1，p2=>{ 常数midY=p1.y+p2.y/2； 返回`M${p1.x}，${p1.y} C${p1.x}，${midY}${p2.x}，${midY}${p2.x}，${p2.y}`； }; 常量svg=d3。选择“svg”； svg.append'circle' .attr'cx'，来自.x .attr'cy'，来自.y .attr'r'，3 .样式“填充”、“红色” svg.append'circle' .attr'cx'，至.x .attr'cy'，to.y .attr'r'，3 .样式“填充”、“红色” svg.append'path' .attr'd'，getCubicBezierPathfrom，至 .style'stroke'、'blue' .样式“填充”、“无”

---

带有箭头标记的路径：

常数from={x:20，y:20}； 常数to={x:50，y:100}； 常量getCubicBezierPath=p1，p2=>{ 常数midY=p1.y+p2.y/2； 返回`M${p1.x}，${p1.y} C${p1.x}，${midY}${p2.x}，${midY}${p2.x}，${p2.y}`； }; 常量svg=d3。选择“svg”； svg.append'circle' .attr'cx'，来自.x .attr'cy'，来自.y .attr'r'，3 .样式“填充”、“红色” svg.append'circle' .attr'cx'，至.x .attr'cy'，to.y .attr'r'，3 .样式“填充”、“红色” svg.append'path' .attr'd'，getCubicBezierPathfrom，至 .attr'marker-end'，'url箭头' .style'stroke'、'blue' .样式“填充”、“无”

---

这太棒了！你还可以建议如何在一端添加箭头吗？@Satykidas使用一个标记刚刚添加了一个带有箭头的示例片段。请标出正确答案