如何通过点（非半径和角度）在D3.js中绘制圆形或圆弧？

核心问题：SVG路径指令使用错误 #

你写的d3_path函数误用了三次贝塞尔曲线指令C，但提供的是圆弧/圆形上的离散顶点。SVG的C指令要求每个线段必须提供两个控制点+一个终点，你直接把所有顶点堆在C后面，完全不符合路径语法，这是图形显示异常的根本原因。

修正方案1：用直线连接离散点（匹配你的思路） #

如果你坚持通过预计算的离散点绘制图形，需要把路径指令改成L（直线连接），修正后的路径生成函数如下：

function d3_path(apts) {
  if (apts.length === 0) return "";
  
  // 起始点指令
  let sPath = `M ${apts[0].x} ${apts[0].y}`;
  
  // 用直线连接后续所有顶点
  for (let i = 1; i < apts.length; i++) {
    sPath += ` L ${apts[i].x} ${apts[i].y}`;
  }
  
  return sPath;
}

同时注意两个细节：

• 初始化顶点数组时，应该用对象而非数组：vertex[iposi] = {};（你之前写的[]不影响属性赋值，但语义上不正确）
• 绘制圆形时，确保生成足够多的离散点（比如每15°生成一个点，至少24个点），否则闭合后会呈现多边形而非圆形。

修正方案2：用D3内置形状生成器（更高效可靠） #

D3提供了d3.arc()和d3.circle()等内置形状生成器，能自动处理SVG路径语法，且更容易结合比例尺解决半径的歧义问题：

绘制圆形示例

// 假设原始数据包含圆心(cx, cy)和半径r
const circleGenerator = d3.arc()
  .innerRadius(0)
  // 结合x比例尺转换半径，若x/y比例尺范围不同，可按需调整（比如取最小值）
  .outerRadius(xscale(r))
  .startAngle(0)
  .endAngle(Math.PI * 2); // 完整圆形

og.select("#layer" + dataGroup[i].values[0].layer )
  .append('svg:path') 
  .attr("id", dataGroup[i].values[0].name )               
  .attr('d', circleGenerator({
    x: xscale(cx),
    y: yscale(cy)
  }))  
  .attr('stroke-width', `${dwidth_out}px`) 
  .attr('fill', 'none');

绘制圆弧示例

// 假设原始数据包含圆心(cx, cy)、半径r、起始角startAngle、结束角endAngle
const arcGenerator = d3.arc()
  .innerRadius(0)
  .outerRadius(xscale(r))
  .startAngle(startAngle) // 弧度值
  .endAngle(endAngle); // 弧度值

og.select("#layer" + dataGroup[i].values[0].layer )
  .append('svg:path') 
  .attr("id", dataGroup[i].values[0].name )               
  .attr('d', arcGenerator({
    x: xscale(cx),
    y: yscale(cy)
  }))  
  .attr('stroke-width', `${dwidth_out}px`) 
  .attr('fill', 'none');

额外提示 #

如果x/y比例尺的范围不同（比如x轴范围远大于y轴），直接用单一比例尺转换半径会导致图形拉伸变形。此时可以通过计算比例尺的缩放比例，对半径进行修正：

const xRange = xscale.range()[1] - xscale.range()[0];
const yRange = yscale.range()[1] - yscale.range()[0];
const scaleRatio = yRange / xRange;
const adjustedRadius = xscale(r) * scaleRatio;

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