D3.js 入门指南

D3.js(Data-Driven Documents)是一个强大的 JavaScript 库,用于基于数据来创建动态和交互式的数据可视化。它使得开发者可以通过数据驱动的方式将数据绑定到 DOM 元素,并使用 HTML、SVG 和 CSS 来渲染视觉效果。

环境准备

在开始之前,确保你的项目中引入了 D3.js。你可以通过 CDN 引入:

复制代码
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3.js Demo</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <div id="chart"></div>
    <script src="script.js"></script>
</body>
</html>

在上面的代码中,我们创建了一个 HTML 文件,并引入了 D3.js 的最新版本。

创建简单的柱状图

接下来,我们将通过一段简单的代码,使用 D3.js 创建一个柱状图。首先,在 script.js 文件中添加以下内容:

复制代码

// 数据

const data = [30, 86, 168, 234, 12, 60, 100];

// 设置宽度和高度

const width = 400;

const height = 200;

// 创建一个 SVG 容器

const svg = d3.select("#chart")

.append("svg")

.attr("width", width)

.attr("height", height);

// 创建比例尺

const xScale = d3.scaleBand()

.domain(data.map((d, i) => i)) // 使用数据索引作为 x 轴值

.range([0, width])

.padding(0.1); // 设置柱子间距

const yScale = d3.scaleLinear()

.domain([0, d3.max(data)]) // y 轴值范围

.range([height, 0]); // 垂直坐标反转

// 绘制柱状图

svg.selectAll("rect")

.data(data) // 绑定数据

.enter() // 为每个数据创建一个矩形

.append("rect")

.attr("x", (d, i) => xScale(i)) // x 坐标

.attr("y", d => yScale(d)) // y 坐标

.attr("width", xScale.bandwidth()) // 设置柱子宽度

.attr("height", d => height - yScale(d)) // 设置柱子高度

.attr("fill", "steelblue"); // 设置颜色

代码解析

  1. 数据定义 :我们定义一个包含数值的数组 data,这些数值将用于绘制柱状图的高度。

  2. SVG 容器 :使用 d3.select() 来选择我们在 HTML 中定义的 div,然后创建一个宽度为 400,高度为 200 的 SVG 容器。

  3. 比例尺

    • xScale: 使用 scaleBand 创建横坐标比例尺,将数据的索引映射到 SVG 的宽度。
    • yScale: 使用 scaleLinear 创建纵坐标比例尺,将数据的值映射到 SVG 的高度。
  4. 绘制柱状图

    • 通过 selectAll("rect") 选择所有矩形,并通过 data(data) 绑定数据。
    • 使用 enter() 方法为每个数据项创建一个矩形元素。
    • 设置矩形的 x, y, width, heightfill 属性,根据比例尺和数据计算出相应的值。

运行示例

只需打开你的 HTML 文件,你将会看到一个简单的柱状图,如下所示:还是自己去跑吧

总结

通过这篇文章,你已经了解了 D3.js 的基本用法,并成功创建了一个简单的柱状图。D3.js 是一个功能极其强大的库,可以实现各种复杂的可视化效果,关于数据可视化的更多功能,可以参考 D3.js 的官方文档

相关推荐
小桥风满袖1 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
编程贝多芬1 小时前
Promise 的场景和最佳实践
前端·javascript
Asort1 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio1 小时前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
Lotzinfly1 小时前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
一个大苹果1 小时前
setTimeout延迟超过2^31立即执行?揭秘JavaScript定时器的隐藏边界
javascript
普郎特2 小时前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript
侃侃_天下2 小时前
最终的信号类
开发语言·c++·算法
一枚前端小能手2 小时前
「周更第3期」实用JS库推荐:Lodash
前端·javascript
艾小码2 小时前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js