D3基础图形绘制

在可视化数据分析的领域，D3（Data-Driven Documents）已成为一门艺术，将富有生气的数据与图形的优美结合，呈现在探索者的眼前。D3是一个JavaScript库，旨在通过使用HTML、SVG以及CSS来运用数据驱动的技术，将数据生动地展现出来。本文将引导阅读者探索D3的世界，详细介绍如何绘制几种基础图形，并借助丰富的实例，让技术之花在经典的土壤中盛开。

矩形(Rectangles)

矩形是最常见的图形之一，它们用来表示条形图、树状图和其他分块表达数据的方式。

javascript 复制代码

d3.select('svg')
  .append('rect')
  .attr('x', 10)
  .attr('y', 10)
  .attr('width', 200)
  .attr('height', 100)
  .attr('fill', 'steelblue');

在SVG画布中，以（10,10）为起始点，绘制一个宽为200高为100的矩形，并填充以钢蓝色。

圆形(Circles)

圆形通过其面积的大小来传递量度的信息，常常用在散点图和包含圆形的信息图中。

javascript 复制代码

d3.select('svg')
  .append('circle')
  .attr('cx', 50)
  .attr('cy', 50)
  .attr('r', 40)
  .attr('fill', 'tomato');

此代码段创建了一个中心位于（50,50）的圆，半径为40，并以西红柿色标记。

椭圆(Ellipses)

椭圆可以被看作是变形的圆形，其在不同的轴向上拥有不同的半径，适用于需要扭曲圆形比例的场景。

javascript 复制代码

d3.select('svg')
  .append('ellipse')
  .attr('cx', 150)
  .attr('cy', 100)
  .attr('rx', 70)
  .attr('ry', 40)
  .attr('fill', 'lavender');

以（150,100）为中心点，分别设置水平半径70和垂直半径40，填充为薰衣草紫。

线(Line)

线性图形是表达数据变化趋势的直观方式，它们连接各个数据点，展示其间的关系。

javascript 复制代码

var data = [{x: 10, y: 50}, {x: 100, y: 150}, {x: 200, y: 100}];

var lineGenerator = d3.line()
  .x(d => d.x)
  .y(d => d.y);

d3.select('svg')
  .append('path')
  .attr('d', lineGenerator(data))
  .attr('stroke', 'black')
  .attr('fill', 'none');

在此例中，三个坐标点被连接起来，形成一条折线。

折线(Polylines)

折线是由多段直线段组成的一系列连接点。

javascript 复制代码

d3.select('svg')
  .append('polyline')
  .attr('points', '20,20 40,25 60,40 80,120 120,140 200,180')
  .attr('stroke', 'gray')
  .attr('fill', 'none');

以上代码绘制了一个由特定点坐标集序列连接的折线图。

多边形(Polygons)

多边形类似折线，但其起点和终点相连，形成闭合的图形。

javascript 复制代码

d3.select('svg')
  .append('polygon')
  .attr('points', '200,10 250,190 160,210')
  .attr('stroke', 'olive')
  .attr('fill', 'cornflowerblue');

这段代码绘制了一个顶点分别位于(200,10)、(250,190)和(160,210)的三角形。

文本(Text)

在可视化中，文本用来直接传达信息或对图表的某个部分进行标注。

javascript 复制代码

d3.select('svg')
  .append('text')
  .attr('x', 10)
  .attr('y', 50)
  .text('D3 Visualization')
  .attr('fill', 'darkgreen');

该文本展示了在画布上位置为（10,50）处绘制的文字。

路径(Path)

路径元素是SVG中功能最为强大的图形，因其D属性可以定义复杂的形状和线条。

javascript 复制代码

d3.select('svg')
  .append('path')
  .attr('d', 'M10 80 Q 95 10 180 80 T 350 80')
  .attr('stroke', 'blue')
  .attr('fill', 'none');

上述代码展示了一个基于贝塞尔曲线的路径，其中M代表起点，Q定义曲线控制点，T代表反射控制点。

弧(Arcs)

弧形通常用于绘制饼图或径向计量图。

javascript 复制代码

var arcGenerator = d3.arc()
  .innerRadius(0)
  .outerRadius(100)
  .startAngle(0)
  .endAngle(Math.PI / 2);

d3.select('svg')
  .append('path')
  .attr('d', arcGenerator())
  .attr('transform', 'translate(100,100)')
  .attr('fill', 'cornflowerblue');

这段代码绘制了圆心在（100,100）的四分之一圆弧。

面积图(Area)

面积图在折线图基础上，通过填充线条下方的区域，赋予图表更强的视觉重量。

javascript 复制代码

var areaGenerator = d3.area()
  .x(d => d.x)
  .y0(200)
  .y1(d => d.y);

var data = [{x: 10, y: 50}, {x: 50, y: 150}, {x: 90, y: 100}, {x: 140, y: 210}];

d3.select('svg')
  .append('path')
  .attr('d', areaGenerator(data))
  .attr('fill', 'lightskyblue');

通过面积生成器定义上下沿的路径并绘制，创建了一种充满动感又不失统计严谨性的面积图。