D3.js 教程

D3.js 是一个强大的 JavaScript 库，用于数据可视化。以下是一些基本的教程步骤，帮助您开始使用 D3.js。

安装和设置

首先，您需要将 D3.js 库添加到您的项目中。您可以从 D3.js 官网下载最新的版本，或者使用 npm 安装：

npm install d3

基础示例

以下是一个简单的 D3.js 示例，展示了如何创建一个柱状图：

// 引入 D3.js 库
import * as d3 from 'd3';

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

// 添加一些数据
const data = [30, 80, 45, 60];

// 创建比例尺
const xScale = d3.scaleLinear()
    .domain([0, d3.max(data)])
    .range([0, 500]);

// 创建 Y 轴
const yScale = d3.scaleLinear()
    .domain([0, 100])
    .range([300, 0]);

// 绘制矩形
svg.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('x', (d, i) => xScale(i))
    .attr('y', d => yScale(d))
    .attr('width', (d, i) => xScale(1))
    .attr('height', d => 300 - yScale(d))
    .attr('fill', 'blue');

进一步学习

如果您想了解更多关于 D3.js 的内容，可以访问 D3.js 中文社区。