D3 Starter Kit 使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00618/article/details/141802923

D3 Starter Kit 使用教程

d3-starterkitSnippets and conventions for d3 项目地址:https://gitcode.com/gh_mirrors/d3/d3-starterkit

1、项目介绍

d3-starterkit 是一个为 D3.js 项目提供代码片段和约定集合的开源项目。它旨在帮助开发者快速启动新的 D3 项目，无需繁琐的初始设置。项目包含了 D3、lodash、d3-jetpack 以及一些方便的 CSS 和实用函数。此外，它还提供了简短的示例和更详细的博客文章，帮助开发者理解和使用。

2、项目快速启动

安装

首先，克隆项目到本地：

git clone https://github.com/1wheel/d3-starterkit.git
cd d3-starterkit

运行

在项目目录下，打开 index.html 文件即可看到示例图表。

示例代码

以下是一个简单的示例代码，展示了如何使用 d3-starterkit 创建一个基本的图表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3 Starter Kit Example</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="d3-jetpack.js"></script>
    <script src="d3-starterkit.js"></script>
    <script>
        // 数据
        var data = [10, 20, 30, 40, 50];

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

        // 绘制柱状图
        svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("x", function(d, i) { return i * 100; })
            .attr("y", function(d) { return 300 - d; })
            .attr("width", 50)
            .attr("height", function(d) { return d; })
            .attr("fill", "steelblue");
    </script>
</body>
</html>