D3 -在两点之间的直线中间添加点

// 引入D3库
<script src="https://d3js.org/d3.v7.min.js"></script>

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

// 定义两个点
const points = [[50, 50], [450, 250]];

// 计算中间点
const midPoint = [(points[0][0] + points[1][0]) / 2, (points[0][1] + points[1][1]) / 2];

// 绘制直线
svg.append("line")
    .attr("x1", points[0][0])
    .attr("y1", points[0][1])
    .attr("x2", points[1][0])
    .attr("y2", points[1][1])
    .style("stroke", "black");

// 绘制中间点
svg.append("circle")
    .attr("cx", midPoint[0])
    .attr("cy", midPoint[1])
    .attr("r", 5)
    .style("fill", "red");

// 正确的计算中间点公式
const midPoint = [(points[0][0] + points[1][0]) / 2, (points[0][1] + points[1][1]) / 2];