D3.js area() 方法

在使用D3.js创建可视化图表时，面积图（Area Chart）是一个经常用到的图表类型。D3.js中的area()方法就是用来创建面积图的。

1. 语法

d3.area()方法的详细语法如下：

d3.area()
    .x(function(d) { return x(d.date); })
    .y0(height)
    .y1(function(d) { return y(d.value); });

方法中最重要的三个参数是x、y0和y1，表示数据中x轴的值、底部的y坐标和顶部的y坐标，可以使用函数来设定这些参数。

2. 示例

下面是一个简单的面积图的示例代码，通过area()方法创建面积图，并使用d3.curveLinear设置线条的形状。

var data = [
  {date: '2021-01', value: 100},
  {date: '2021-02', value: 156},
  {date: '2021-03', value: 224},
  {date: '2021-04', value: 352},
  {date: '2021-05', value: 423},
  {date: '2021-06', value: 532},
  {date: '2021-07', value: 632},
  {date: '2021-08', value: 746},
  {date: '2021-09', value: 876},
  {date: '2021-10', value: 909},
  {date: '2021-11', value: 999},
  {date: '2021-12', value: 1000}
];

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var svg = d3.select('body').append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

var x = d3.scaleTime()
    .range([0, width])
    .domain(d3.extent(data, function(d) { return new Date(d.date); }));

var y = d3.scaleLinear()
    .range([height, 0])
    .domain([0, d3.max(data, function(d) { return d.value; })]);

var area = d3.area()
    .curve(d3.curveLinear)
    .x(function(d) { return x(new Date(d.date)); })
    .y0(height)
    .y1(function(d) { return y(d.value); });

svg.append('path')
    .datum(data)
    .attr('class', 'area')
    .attr('d', area);

上述代码的实现过程如下：

• 第1-14行定义了一些常量，包括绘制图表的尺寸、选择SVG元素、定义x轴和y轴，以及定义数据，这些都是面积图的必要元素；
• 第16行开始定义area()方法，设定curve属性为线条的形状，x属性为date的值，y0为线条底部坐标恒为图表高度，y1设为value的值；
• 第23行绘制面积图，使用刚才设定好的area()方法和数据。

3. 结论

D3.js中的area()方法是一种绘制面积图的简单实现方式，对于数据可视化的编程人员来说，这是一种非常有用的工具。