D3.js图表库使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00295/article/details/141154114

D3.js图表库使用教程

D3-graph-galleryA collection of simple graphics made with D3.js项目地址:https://gitcode.com/gh_mirrors/d3/D3-graph-gallery

项目介绍

D3.js图表库是一个开源的JavaScript库，用于基于数据操作文档。它提供了一系列强大的工具，帮助开发者创建各种动态和交互式的数据可视化图表。该项目在GitHub上的地址为：https://github.com/holtzy/D3-graph-gallery。

项目快速启动

安装

首先，确保你已经安装了Node.js和npm。然后，通过以下命令克隆项目仓库：

git clone https://github.com/holtzy/D3-graph-gallery.git
cd D3-graph-gallery

运行

在项目目录中，你可以直接打开HTML文件来查看图表。例如，要查看散点图，可以打开scatter.html文件：

open scatter.html

示例代码

以下是一个简单的D3.js散点图示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3.js Scatter Plot</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <script>
        // 数据
        const data = [
            {x: 10, y: 20},
            {x: 20, y: 30},
            {x: 30, y: 40},
            {x: 40, y: 50},
            {x: 50, y: 60}
        ];

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

        // 绘制散点
        svg.selectAll("circle")
           .data(data)
           .enter()
           .append("circle")
           .attr("cx", d => d.x)
           .attr("cy", d => d.y)
           .attr("r", 5);
    </script>
</body>
</html>