D3.js 示例项目教程

2024-09-14 23:57:51作者：卓艾滢Kingsley

项目介绍

D3.js（Data-Driven Documents）是一个用于数据可视化的 JavaScript 库。它允许开发者通过数据驱动的方式操作 DOM，创建动态和交互式的数据可视化。本项目（kbroman/d3examples）提供了多个 D3.js 的示例代码，帮助开发者快速上手并理解 D3.js 的核心概念和用法。

项目快速启动

1. 克隆项目

首先，克隆项目到本地：

git clone https://github.com/kbroman/d3examples.git

2. 安装依赖

进入项目目录并安装必要的依赖：

cd d3examples
npm install

3. 运行示例

启动本地服务器以查看示例：

npm start

打开浏览器并访问 http://localhost:3000，你将看到多个 D3.js 的示例。

应用案例和最佳实践

1. 柱状图示例

以下是一个简单的柱状图示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3 Bar Chart</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <div id="chart"></div>
    <script>
        const data = [4, 8, 15, 16, 23, 42];

        const svg = d3.select("#chart")
            .append("svg")
            .attr("width", 500)
            .attr("height", 300);

        svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("x", (d, i) => i * 70)
            .attr("y", d => 300 - d * 5)
            .attr("width", 65)
            .attr("height", d => d * 5)
            .attr("fill", "steelblue");
    </script>
</body>
</html>

2. 折线图示例

以下是一个简单的折线图示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3 Line Chart</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <div id="chart"></div>
    <script>
        const data = [
            {x: 0, y: 5},
            {x: 1, y: 9},
            {x: 2, y: 7},
            {x: 3, y: 5},
            {x: 4, y: 3},
            {x: 6, y: 4},
            {x: 7, y: 2},
            {x: 8, y: 3},
            {x: 9, y: 2}
        ];

        const svg = d3.select("#chart")
            .append("svg")
            .attr("width", 500)
            .attr("height", 300);

        const line = d3.line()
            .x(d => d.x * 50)
            .y(d => 300 - d.y * 20);

        svg.append("path")
            .datum(data)
            .attr("fill", "none")
            .attr("stroke", "steelblue")
            .attr("stroke-width", 2)
            .attr("d", line);
    </script>
</body>
</html>