如何在Nivo径向条形图中添加箭头？

Nivo的径向条形图（环形条形图）本身没有内置箭头配置，但可以通过自定义图层或自定义条形组件实现箭头效果，以下是两种实用方案：

方案一：自定义图层绘制箭头 #

利用Nivo提供的layers属性，在默认图表图层之上添加自定义SVG元素，手动计算每个条形末端位置并绘制箭头。

代码示例 #

import { RadialBar } from '@nivo/radial-bar';

// 自定义箭头图层组件
const ArrowLayer = ({ slices }) => {
  return (
    <g>
      {slices.map(slice => {
        // 获取条形外端点坐标（Nivo的slice结构中，points[3]为外端点）
        const { x, y } = slice.points[3];
        // 计算箭头指向角度
        const angle = Math.atan2(y, x);
        // 箭头尺寸
        const arrowSize = 8;

        // 用多边形绘制箭头
        return (
          <polygon
            key={slice.id}
            points={`${x},${y} ${x - arrowSize*Math.cos(angle - Math.PI/6)},${y - arrowSize*Math.sin(angle - Math.PI/6)} ${x - arrowSize*Math.cos(angle + Math.PI/6)},${y - arrowSize*Math.sin(angle + Math.PI/6)}`}
            fill={slice.color}
            stroke="#ffffff"
            strokeWidth={1}
          />
        );
      })}
    </g>
  );
};

// 带箭头的径向条形图组件
export default function RadialBarWithArrows() {
  const data = [
    { category: 'A', value: 40 },
    { category: 'B', value: 60 },
    { category: 'C', value: 80 }
  ];

  return (
    <RadialBar
      data={data}
      width={600}
      height={600}
      innerRadius={0.2}
      outerRadius={0.8}
      startAngle={-90}
      endAngle={270}
      indexBy="category"
      valueBy="value"
      colors={{ scheme: 'nivo' }}
      // 将箭头图层添加到默认图层之后
      layers={['radialBars', 'axes', ArrowLayer]}
    />
  );
}

方案二：使用SVG Marker标记箭头 #

定义SVG箭头标记，通过自定义条形组件为每个条形末端添加该标记，样式统一且实现更简洁。

代码示例 #

import { RadialBar } from '@nivo/radial-bar';

// 定义SVG箭头标记的图层
const ArrowMarkerLayer = () => {
  return (
    <defs>
      <marker
        id="radial-bar-arrow"
        markerWidth="12"
        markerHeight="12"
        refX="10"
        refY="6"
        orient="auto"
      >
        {/* 箭头形状：三角形 */}
        <polygon points="0 0, 12 6, 0 12" fill="currentColor" />
      </marker>
    </defs>
  );
};

// 带箭头标记的径向条形图组件
export default function RadialBarWithMarkerArrows() {
  const data = [
    { category: 'A', value: 40 },
    { category: 'B', value: 60 },
    { category: 'C', value: 80 }
  ];

  return (
    <RadialBar
      data={data}
      width={600}
      height={600}
      innerRadius={0.2}
      outerRadius={0.8}
      startAngle={-90}
      endAngle={270}
      indexBy="category"
      valueBy="value"
      colors={{ scheme: 'nivo' }}
      // 先加载标记图层，再渲染条形
      layers={[ArrowMarkerLayer, 'radialBars', 'axes']}
      // 自定义条形组件，添加箭头标记
      barComponent={({ slice, ...props }) => (
        <path
          {...props}
          d={slice.path}
          fill={slice.color}
          markerEnd="url(#radial-bar-arrow)"
        />
      )}
    />
  );
}

注意事项 #

• 不同Nivo版本的slice结构可能略有差异，若箭头位置错误，可打印slice对象确认外端点索引。
• 箭头的尺寸、颜色、形状可按需调整，比如修改arrowSize、fill值或多边形的points坐标。
• 要让箭头与条形颜色一致，方案一直接用slice.color，方案二用currentColor继承条形颜色即可。

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