D3 - Javascript

D3.js (Data-Driven Documents) 是一个基于 JavaScript 的开源可视化库，它使用 HTML、SVG 和 CSS 来呈现数据。

特点

• D3 是一个灵活的库，没有预设的模块化结构，可以根据需要仅使用所需的部分。
• D3 基于 Web 标准，使得可以轻松的使用 HTML、SVG 和 CSS 来创建交互式的可视化。
• D3 与其他库之间互不依赖，可以方便的与 Angular、React、Vue 等框架配合使用。
• D3 提供了大量的内置函数可以帮助开发者快速地操作数据，如数据转换、缩放、过滤等。

安装

通过 NPM 安装：

npm install d3

或者通过 CDN 引入：

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

示例

以下是一个简单的例子，使用 D3.js 来创建一个饼图：

// 定义数据
const data = [
  { name: 'Apple', value: 20 },
  { name: 'Orange', value: 30 },
  { name: 'Banana', value: 10 },
  { name: 'Grape', value: 15 },
  { name: 'Pineapple', value: 25 }
];

// 创建 SVG 元素
const svg = d3.select('body')
  .append('svg')
  .attr('width', 400)
  .attr('height', 400);

// 创建饼图
const pie = d3.pie()
  .value(d => d.value);
const data_ready = pie(data);

// 创建弧形生成器
const arc_generator = d3.arc()
  .innerRadius(0)
  .outerRadius(150);

// 创建弧形路径
const arcs = svg.selectAll('arc')
  .data(data_ready)
  .enter()
  .append('path')
  .attr('transform', 'translate(200,200)')
  .attr('d', arc_generator)
  .attr('fill', (d, i) => d3.schemeCategory10[i]);

// 创建图例
const legend = svg.selectAll('legend')
  .data(data_ready)
  .enter()
  .append('rect')
  .attr('x', 250)
  .attr('y', (d, i) => i * 30 + 20)
  .attr('width', 20)
  .attr('height', 20)
  .attr('fill', (d, i) => d3.schemeCategory10[i]);
const text = svg.selectAll('text')
  .data(data_ready)
  .enter()
  .append('text')
  .attr('x', 280)
  .attr('y', (d, i) => i * 30 + 35)
  .text(d => d.data.name);

运行结果如下：

结束语

D3.js 是一个非常强大的可视化库，通过 D3.js 可以简洁明了地呈现数据，提升数据交互的效果。无论是在数据分析、数据可视化、以及前端可视化上，D3 都是一个非常重要的工具。