如何利用点数据集构建SVG path圆形而非circle元素？

我有一组包含构建圆形所需全部点的数据集，需要用这组数据创建SVG的path元素（不能用circle元素）来呈现圆形。尝试了下面的代码但没成功，请问可以用哪些path命令实现？

我的代码 #

JavaScript #

const svgns = 'http://www.w3.org/2000/svg';
const data = [{
    "x": 384,
    "y": 552
}, {
    "x": 440.4273842,
    "y": 533.6656315
}, {
    "x": 475.3014256,
    "y": 485.6656315
}, {
    "x": 475.3014256,
    "y": 426.3343685
}, {
    "x": 440.4273842,
    "y": 378.3343685
}, {
    "x": 384,
    "y": 360
}, {
    "x": 327.5726158,
    "y": 378.3343685
}, {
    "x": 292.6985744,
    "y": 426.3343685
}, {
    "x": 292.6985744,
    "y": 485.6656315
}, {
    "x": 327.5726158,
    "y": 533.6656315
}, {
    "x": 384,
    "y": 552
}];

const svg = d3.select('#viz')
    .append('svg')
    .attr('xmlns', svgns)
    .attr('viewBox', '0 0 600, 600');

svg.append('path')
    .attr('d', () => {
        return d3.line().x(d => d.x).y(d => d.y)(data)
    })
    .attr('fill', 'none')
    .attr('stroke', 'red');

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
<body>   
    <div id="viz"></div>   
</body>
</html>

解决方案 #

你当前的问题是d3.line()默认用直线连接点，画出的是多边形而非平滑圆形。有两种简单的解决方式：

1. 用D3曲线插值器生成平滑闭合路径 #

D3提供了多种曲线插值器，只需给d3.line()加上闭合曲线配置，就能把点集转换成平滑圆形路径。推荐用curveBasisClosed或curveNatural，修改后的代码如下：

svg.append('path')
    .attr('d', () => {
        // 添加curveBasisClosed实现平滑闭合曲线
        return d3.line().x(d => d.x).y(d => d.y).curve(d3.curveBasisClosed)(data)
    })
    .attr('fill', 'none')
    .attr('stroke', 'red');

2. 手动用SVG路径命令构建圆形 #

如果不想依赖D3的曲线插值，也可以直接用SVG原生路径命令：

• 椭圆弧命令（A）：圆形是椭圆的特例，已知你的圆心坐标为(384, 456)、半径为96，可以用A命令绘制完整圆：

  M 384 552 A 96 96 0 1 1 384 551.999 Z
  

  这里用551.999替代552是为了避免起点终点完全重合导致的渲染异常，最后用Z命令闭合路径。
• 三次贝塞尔曲线（C）：用数据集里的点作为控制点，依次用C命令连接即可，不过D3的曲线插值已经封装了这个逻辑，直接用方案1更高效。

内容的提问来源于stack exchange，提问作者smpa01