如何使用D3.js v4为SVG圆形添加四等分填充分段

API 探路者

2026-5-13

解决D3.js v4将SVG圆形分为4个均等彩色分段的问题

我来帮你搞定这个把SVG圆形拆成4个均等彩色分段的需求～核心思路是用D3的d3.arc()生成扇形路径，把4个90度的扇形拼起来就是完整的圆，每个扇形可以单独设置颜色。下面是具体的实现步骤：

1. 准备分段数据

先定义4个分段的角度范围和对应颜色，每个分段占90度（也就是Math.PI/2弧度）：

const segmentData = [
  { startAngle: 0, endAngle: Math.PI / 2, color: "#ff6b6b" }, // 右上区域
  { startAngle: Math.PI / 2, endAngle: Math.PI, color: "#4ecdc4" }, // 左上区域
  { startAngle: Math.PI, endAngle: 3 * Math.PI / 2, color: "#ffe66d" }, // 左下区域
  { startAngle: 3 * Math.PI / 2, endAngle: 2 * Math.PI, color: "#1a535c" } // 右下区域
];

2. 创建弧生成器

用d3.arc()创建扇形生成器，设置内半径（0，因为我们要实心圆）、外半径（你的圆的目标半径）：

const arcGenerator = d3.arc()
  .innerRadius(0)
  .outerRadius(20) // 这里替换成你实际需要的圆半径
  .cornerRadius(0); // 不需要圆角就设0，想要圆角可以填数值比如3

3. 替换原有圆形绘制逻辑

你原来的代码里应该是用<circle>元素绘制family类型的节点，现在把这部分换成绘制4个扇形路径。假设你已经有节点组node，可以这样写：

// 筛选出family类型的节点，绘制分段
node.filter(d => d.type === 'family')
  .each(function(d) {
    const group = d3.select(this);
    // 因为节点组已经通过transform属性定位，扇形用相对坐标(0,0)即可跟随节点移动
    group.selectAll(".family-segment")
      .data(segmentData)
      .enter()
      .append("path")
      .attr("class", "family-segment")
      .attr("d", arcGenerator) // 用弧生成器生成扇形路径
      .attr("fill", seg => seg.color); // 给每个分段设置对应颜色
  });