D3

说明

• D3 是面向数据驱动文档的前端可视化库, 擅长做高定制化 SVG / Canvas / DOM 图形.
• 若只是快速出图, 可以优先评估 ECharts; 若需要细粒度控制数据绑定和图形渲染, 再考虑 D3.

安装

npm install d3
npm install -D @types/d3

引入

import * as d3 from 'd3'

常见能力

• d3.scaleBand(): 适合离散类目轴.
• d3.scaleLinear(): 适合连续数值映射.
• d3.select() / d3.selectAll(): 选择和绑定节点.
• d3.axisBottom() / d3.axisLeft(): 快速构建坐标轴.
• 还可进一步组合过渡动画, 缩放, 拖拽和数据绑定能力.

典型使用思路

1. 准备原始数据并计算比例尺 scale.
2. 创建 SVG 容器并设置视口.
3. 绑定数据到图形元素, 例如 rect, circle, path.
4. 生成坐标轴和标签.
5. 根据交互需要继续叠加 tooltip, 动画或缩放行为.

使用建议

• 若需要高度定制化图形和交互, D3 很灵活.
• 若只是快速出图, 可以先评估 ECharts 或其他高层图表库.
• 在 React / Vue 中使用时, 建议先明确由谁管理 DOM, 避免框架和 D3 同时修改同一节点.