D3.js arc.cornerRadius()函数介绍

简介

D3.js 是一款流行的数据可视化 JavaScript 库，由于其简单易用且功能强大，被众多程序员所使用。其中的 d3.arc 函数可以创建一个圆弧画布路径生成器，并支持 arc.cornerRadius() 函数，用于设置圆弧的角度圆滑度。

语法

arc.cornerRadius([value])

其中，可选参数 value 为圆弧角度圆滑度。

返回值

如果指定了参数 value，则返回当前 d3.arc 函数实例；否则返回当前 arc.cornerRadius() 当前的角度圆滑度。

示例

以下是一个简单的例子：

const svg = d3.select('svg');
const width = +svg.attr('width');
const height = +svg.attr('height');
const g = svg.append('g').attr('transform', `translate(${width / 2},${height / 2})`);

const arc = d3.arc()
  .innerRadius(0)
  .outerRadius(100)
  .startAngle(0)
  .endAngle(Math.PI / 2)
  .cornerRadius(10);

g.append('path')
  .attr('d', arc)
  .attr('fill', 'steelblue');

此例子创建了一个半径为 100，起点角度为 0 ，终点角度为 π/2 (即 $90^\circ$) 的半圆，并使用圆角度数设置圆角度圆滑度为 10 。

附加说明

若指定的圆滑度大于半圆弧的半径，则会出现以下效果：

const arc2 = d3.arc()
  .innerRadius(0)
  .outerRadius(100)
  .startAngle(0)
  .endAngle(Math.PI / 2)
  .cornerRadius(120);

g.append('path')
  .attr('d', arc2)
  .attr('fill', 'orange');

此时设置的圆角度数为 120，大于宽度为 200 的半圆，因此出现了超出半圆的效果。

需要注意的是，当圆弧绘制角度 $>\pi$ 时，圆弧将被绘制成一个闭合的区域，而不是只有一段圆弧。