course-center/languages/zh/tools/d3js

D3.js 是一个强大的 JavaScript 库，用于生成交互式数据可视化。它允许你使用 HTML、SVG 和 CSS 来创建数据驱动的图形和图表。

主要特性

动态图形: 使用 JavaScript 和 SVG 创建交互式数据可视化。
灵活的数据绑定: 将数据绑定到 DOM 元素，轻松更新和动画化。
丰富的图形元素: 支持多种图形元素，如线、圆、矩形等。
响应式设计: 自动适应不同屏幕尺寸。

快速入门

安装 D3.js: 你可以通过 npm 或 yarn 安装 D3.js。
```
npm install d3
```

基本用法: 以下是一个简单的例子，展示如何使用 D3.js 创建一个条形图。

var dataset = [30, 100, 70, 90, 50];
var width = 300;
var barHeight = 20;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", dataset.length * barHeight);

var bar = svg.selectAll("g")
    .data(dataset)
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

bar.append("rect")
    .attr("width", function(d) { return d; })
    .attr("height", barHeight - 2);

bar.append("text")
    .attr("x", function(d) { return d / 2; })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .text(function(d) { return d; });

学习资源

官方文档: D3.js 官方文档

中心教程