D3.js area.curve() 方法介绍

在 D3.js 中，area.curve() 方法用于设置区域图的曲线形状。通过指定不同的曲线类型，可以更改区域图的外观。

语法

area.curve(curve)

• curve：可选参数，指定曲线类型。默认为 d3.curveLinear。

曲线类型

以下是 D3.js 中可用的几种常见曲线类型。

• d3.curveLinear：折线形状。数据点之间直接连接。

• d3.curveStep：台阶形状。从数据点开始绘制垂直线段，然后水平线段，再垂直线段。

• d3.curveBasis：基础曲线。数据点之间通过贝塞尔曲线连接。

• d3.curveCardinal：基础曲线的衍生。数据点之间通过基于三次样条插值的曲线连接。

• d3.curveCatmullRom：卡特莫尔曲线。更平滑的基于三次样条插值的曲线。

• d3.curveMonotoneX：单调 x 轴曲线。保持曲线的单调性，适用于有序数据。

更多曲线类型可参考 D3.js 文档。

示例

以下是一个基础的区域图：

const data = [
  { x: 0, y: 0 },
  { x: 1, y: 4 },
  { x: 2, y: 2 },
  { x: 3, y: 6 },
  { x: 4, y: 3 },
  { x: 5, y: 8 },
];

const svg = d3.select('svg');
const width = +svg.attr('width');
const height = +svg.attr('height');
const padding = 20;

const xScale = d3.scaleLinear()
  .domain(d3.extent(data, d => d.x))
  .range([padding, width - padding]);

const yScale = d3.scaleLinear()
  .domain(d3.extent(data, d => d.y))
  .range([height - padding, padding]);

const areaGenerator = d3.area()
  .x(d => xScale(d.x))
  .y0(yScale(0))
  .y1(d => yScale(d.y))
  .curve(d3.curveLinear);

svg.append('path')
  .datum(data)
  .attr('d', areaGenerator)
  .attr('fill', 'steelblue')
  .attr('stroke', 'none');

可以通过更改 curve 参数来更改曲线形状。例如：

const areaGenerator = d3.area()
  .x(d => xScale(d.x))
  .y0(yScale(0))
  .y1(d => yScale(d.y))
  .curve(d3.curveMonotoneX);

结论

在 D3.js 中，area.curve() 方法可以用来设置区域图的曲线形状。通过指定曲线类型，可以更改区域图的外观，使之更符合数据分布情况。