D3.js

提示

当前版本：v7

介绍

D3.js（Data-Driven Documents） 是一个基于 JavaScript 的可视化库，常用于创建数据驱动的动态和交互式图表。

特点：

• 采用 数据驱动 方式绑定数据与 DOM
• 基于 SVG、Canvas、HTML 进行可视化渲染
• 提供强大的 数据转换、动画 和 交互 支持

安装

npm

npm i d3
npm i -D @types/d3

cdn

<script src="https://d3js.org/d3.v7.min.js"></script>

知识体系

Selection（选择元素）

Data Processing（数据处理）

Scales（比例尺）

Axis（坐标轴）

Shapes（图形生成器）

Layouts（布局）

Transitions（动画过渡）

Events（交互）

常见可视化案例

绘制柱状图

const data = [40, 80, 150, 100, 60]
const svg = d3.select('body').append('svg').attr('width', 500).attr('height', 300)

svg
  .selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', (d, i) => i * 60)
  .attr('y', (d) => 300 - d)
  .attr('width', 50)
  .attr('height', (d) => d)
  .attr('fill', 'teal')

绘制折线图

const lineData = [
  { x: 10, y: 50 },
  { x: 50, y: 80 },
  { x: 90, y: 30 },
  { x: 130, y: 100 },
]
const lineGenerator = d3
  .line()
  .x((d) => d.x)
  .y((d) => d.y)

svg.append('path').datum(lineData).attr('d', lineGenerator).attr('stroke', 'blue').attr('fill', 'none')

绘制散点图

const scatterData = [
  { x: 30, y: 40 },
  { x: 80, y: 90 },
  { x: 120, y: 50 },
]

svg
  .selectAll('circle')
  .data(scatterData)
  .enter()
  .append('circle')
  .attr('cx', (d) => d.x)
  .attr('cy', (d) => d.y)
  .attr('r', 5)
  .attr('fill', 'red')

进阶功能

数据交互

D3.js 可以通过 brush 实现数据筛选。

const brush = d3.brush().on('brush end', (event) => {
  console.log(event.selection)
})

svg.append('g').call(brush)

组合 ECharts

D3 可用于数据预处理，然后传递给 ECharts 进行渲染。

const processedData = d3
  .nest()
  .key((d) => d.category)
  .entries(rawData)

const option = {
  series: [{ type: 'bar', data: processedData }],
}