如何在 D3.js 饼图外围添加带方向的箭头圆环-js教程-PHP中文网

如何在 D3.js 饼图外围添加带方向的箭头圆环

本文详解如何使用 d3.js 在饼图外圈精准绘制带方向箭头的装饰环，通过手动计算箭头位置与旋转角度实现美观、可定制的指向效果，避免 svg marker 的复杂配置。

本文详解如何使用 d3.js 在饼图外圈精准绘制带方向箭头的装饰环，通过手动计算箭头位置与旋转角度实现美观、可定制的指向效果，避免 svg marker 的复杂配置。

在 D3.js 中为饼图（pie chart）外围添加带方向的箭头（如“→”或自定义三角形箭头），关键在于精确定位箭头末端点，并按切线方向旋转。虽然 SVG 原生支持元素（通过 marker-end 属性），但其对弧线路径的自动对齐存在兼容性与控制粒度问题；因此，更可靠、灵活的做法是：为每个饼图扇区边界弧的终点，单独绘制一个 SVG 箭头，并动态计算其坐标与旋转角度。

以下是一个完整、可复用的实现方案（基于 D3 v7+）：

Feishu calendar sync, local ics to json data for AI agent

将ICS日历文件转为JSON格式，用于飞书日历导入导出及数据集成。

下载

✅ 核心思路

使用 d3.arc() 生成外圈装饰弧（半径 = 饼图半径 + 间距）；
对每个扇区数据 d，获取其 endAngle（弧终点角度）；
将箭头中心置于该角度对应的位置：
x = radius × cos(θ − π/2)，y = radius × sin(θ − π/2)（注意：D3 弧坐标系中 0° 指向 x 轴正向，而视觉上“指向弧尾”需绕 y 轴偏移）；
箭头自身初始朝向为「向上」（即 (0,-1) 方向），因此需旋转 endAngle × 180/π − 90 度，使其尖端精确沿弧线切线方向延伸。

? 示例代码（React + D3）

import React, { useEffect, useRef } from "react";
import * as d3 from "d3";

const PieChartWithArrows = ({ data = [10, 10, 10, 10, 10, 10] }) => {
  const svgRef = useRef();

  useEffect(() => {
    const width = 200;
    const height = 200;
    const outerRadius = 100;
    const innerRadius = 0;
    const borderWidth = 1;
    const spaceBetweenSlices = 10;
    const arrowLength = 12;
    const padding = 20;

    const svg = d3
      .select(svgRef.current)
      .attr("width", width + padding * 2)
      .attr("height", height + padding * 2)
      .html("") // 清空旧内容
      .append("g")
      .attr(
        "transform",
        `translate(${width / 2 + padding}, ${height / 2 + padding})`
      );

    const pie = d3.pie().sort(null);
    const pieData = pie(data);

    // 主饼图扇区
    const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius);
    const arcs = svg
      .selectAll("g.arc")
      .data(pieData)
      .enter()
      .append("g")
      .attr("class", "arc");

    arcs
      .append("path")
      .attr("d", arc)
      .attr("fill", (d, i) => d3.schemeCategory10[i % 10]);

    // 外圈装饰弧（无填充，仅描边）
    const borderArc = d3
      .arc()
      .innerRadius(outerRadius + spaceBetweenSlices)
      .outerRadius(outerRadius + borderWidth + spaceBetweenSlices);

    arcs
      .append("path")
      .attr("d", borderArc)
      .attr("fill", "none")
      .attr("stroke", (d, i) => d3.schemeCategory10[i % 10])
      .attr("stroke-width", borderWidth);

    // ✨ 绘制箭头：等边三角形箭头（更专业 than ">" text）
    arcs
      .append("path")
      .attr(
        "d",
        `M-${arrowLength / 2},0 L${arrowLength / 2},0 L0,-${arrowLength}`
      ) // 向上三角形（顶点在上）
      .attr("transform", (d, i) => {
        const radius = outerRadius + spaceBetweenSlices;
        const angle = d.endAngle - Math.PI / 2; // 调整坐标系偏移
        const x = radius * Math.cos(angle);
        const y = radius * Math.sin(angle);
        const rotation = (d.endAngle * 180) / Math.PI - 90; // 对齐切线方向
        return `translate(${x},${y}) rotate(${rotation})`;
      })
      .attr("fill", (d, i) => d3.schemeCategory10[i % 10])
      .attr("stroke", "none");
  }, [data]);

  return <svg ref="{svgRef}"></svg>;
};

export default PieChartWithArrows;