当前位置： 首页 > news >正文

JavaScript进行数据可视化：D3.js入门

news 文章来源：https://blog.csdn.net/qq_43556680/article/details/142729248 2025/5/14 13:09:23

在数据驱动的世界中，数据可视化是理解和传达数据信息的重要手段。D3.js是一个强大的JavaScript库，它允许开发者将数据转换为可交互的图形和图表。本文将为您介绍D3.js的基本概念、特点以及如何入门使用它进行数据可视化。

D3.js简介

什么是D3.js？

D3.js（Data-Driven Documents）是一个基于Web标准（HTML、SVG和CSS）的JavaScript库，它提供了将数据绑定到文档的元素上，并通过这些元素进行数据可视化的能力。D3.js的核心是SVG（可缩放矢量图形），它允许开发者创建高质量的矢量图形。

D3.js的特点

数据绑定：D3.js允许将数据绑定到DOM元素上，这使得数据与视觉元素保持同步。

动态DOM更新：D3.js能够根据数据的变化动态地更新DOM结构，无需重新加载页面。

丰富的可视化元素：D3.js支持多种图表类型，如条形图、散点图、饼图、树状图等。

交互性：D3.js支持多种交互功能，如缩放、拖动、点击事件等。

D3.js核心

选择器（Selections）
D3.js 使用选择器来选择 DOM 元素，并对其进行操作。选择器可以是元素的 ID、类、标签名等。

// 选择 body 元素

d3.select("body");

// 选择具有特定类的元素

d3.selectAll(".myClass");

// 选择所有 div 元素

d3.selectAll("div");

数据绑定（Data Binding）
D3.js 允许将数据绑定到 DOM 元素上，这样数据的变化可以自动反映在视觉上。

var data = [4, 8, 15, 16, 23, 42];
var svg = d3.select("svg");
var circles = svg.selectAll("circle");circles.data(data).enter().append("circle").attr("cx", function(d) { return d * 10; }).attr("cy", function(d) { return 50; }).attr("r", 5);

转换（Transitions）
D3.js 提供了强大的动画功能，允许元素在添加、更新或移除时进行平滑的过渡。

circles.transition().duration(750).attr("cx", function(d) { return d * 10 + 50; });

地图投影（Projections）
D3.js 支持多种地图投影，可以用于将地理坐标转换为二维坐标。

var projection = d3.geo.mercator().center([0, 30]) // 设置中心点.translate([width / 2, height / 2]) // 设置投影的平移.scale(150); // 设置缩放比例var path = d3.geo.path().projection(projection);

交互（Interactivity）
D3.js 支持与用户交互，如点击、悬停等事件。

svg.selectAll("circle").on("mouseover", function() {// 鼠标悬停时的操作}).on("click", function() {// 点击时的操作});

布局（Layouts）
D3.js 提供了多种布局算法，如树状图、力导向图、饼图等。

var tree = d3.layout.tree().size([height, width - 150]);var diagonal = d3.svg.diagonal().source(function(d) { return d.source; }).target(function(d) { return d.target; });

插值（Interpolation）
D3.js 提供了丰富的插值函数，用于在动画中平滑地过渡属性值。

circles.transition().attr("r", function(d) { return d * 10; }).attr("fill", d3.interpolate("red", "blue")); // 在红色和蓝色之间插值

SVG 和 Canvas
D3.js 可以在 SVG 和 Canvas 上绘制图形，这使得它在不同的使用场景中非常灵活。

// 在 SVG 上绘制

var svg = d3.select("svg").append("g");

// 在 Canvas 上绘制

var canvas = d3.select("canvas").append("g");

服务器端渲染（Server-Side Rendering）
D3.js 可以结合服务器端渲染技术，如 Mustache 或 EJS，来生成动态的图表。

// 使用 Mustache 模板和 D3.js 生成图表

var template = d3.template().html("<div>{{name}}</div>");
d3.select("body").append("div").html(template(data));

D3.js入门指南

环境搭建
首先，确保您已经安装了Node.js和npm。然后，通过npm创建一个新的项目并安装D3.js：

mkdir d3-example
cd d3-example
npm init -y
npm install d3

创建SVG元素

在HTML文件中创建一个SVG元素，这是D3.js工作的基础：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>D3.js Example</title>
</head>
<body><svg width="500" height="300"></svg><script src="app.js"></script>
</body>
</html>

编写D3.js代码

在app.js文件中，编写D3.js代码来创建一个简单的条形图：

const data = [30, 80, 45, 60];const svg = d3.select("svg");
const width = +svg.attr("width");
const height = +svg.attr("height");const x = d3.scaleBand().domain(data.map((d, i) => i)).range([0, width]).padding(0.1);const y = d3.scaleLinear().domain([0, d3.max(data)]).range([height, 0]);svg.selectAll("rect").data(data).enter().append("rect").attr("x", (d, i) => x(i)).attr("y", d => y(d)).attr("width", x.bandwidth()).attr("height", d => height - y(d)).attr("fill", "steelblue");

运行示例

在浏览器中打开HTML文件，您将看到一个简单的条形图。通过调整data数组中的数据，您可以看到图表的动态变化。

D3.js进阶功能

D3.js提供了丰富的功能和高级特性，包括但不限于：

数据驱动DOM更新：D3.js允许根据数据的变化动态更新DOM元素。
动画和过渡：D3.js支持在数据更新时添加动画和过渡效果。
布局：D3.js提供了多种布局算法，如树状图布局、力导向布局等。
D3.js是一个功能强大的JavaScript库，它为开发者提供了丰富的工具来创建交互式和动态的数据可视化。通过学习D3.js，您可以轻松地将数据转换为引人入胜的图形和图表，从而更好地理解和传达数据信息。无论是数据分析师还是前端开发者，D3.js都是一个值得掌握的工具。

相关文章：

JavaScript进行数据可视化：D3.js入门

在数据驱动的世界中&#xff0c;数据可视化是理解和传达数据信息的重要手段。D3.js是一个强大的JavaScript库&#xff0c;它允许开发者将数据转换为可交互的图形和图表。本文将为您介绍D3.js的基本概念、特点以及如何入门使用它进行数据可视化。 D3.js简介 什么是D3.js&#…...

编程日记 2024/10/13 5:31:40

字符串拼接方法性能对比和分析

对字符串进行拼接主要有三种方法&#xff1a; 1.加号 2.concat方法 3.StringBuilder或者StringBuffer的append方法 下面看下性能对比&#xff0c;测试方法为各循环十万次&#xff0c;对比耗费时间。 测试性能 1.”"拼接 long start System.currentTimeMillis();String …...

编程日记 2024/10/13 5:30:39

[Halcon矩阵] 通过手眼标定矩阵计算相机旋转角度

&#x1f4e2;博客主页&#xff1a;https://loewen.blog.csdn.net&#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;本文由 丶布布原创&#xff0c;首发于 CSDN&#xff0c;转载注明出处&#x1f649;&#x1f4e2;现…...

编程日记 2024/10/13 5:29:38

推荐几本编程入门书目

对于编程入门&#xff0c;推荐以下几本书籍&#xff0c;这些书籍覆盖了不同的编程语言&#xff0c;适合零基础的学习者逐步掌握编程基础&#xff1a; 1. 《Python编程快速上手——让繁琐工作自动化》 特点&#xff1a;以简单易懂的方式介绍了Python的基础知识和编程概念&#…...

编程日记 2024/10/13 5:28:37

每天一个数据分析题（五百零五）- 提升方法

提升方法&#xff08;Boosting&#xff09;&#xff0c;是一种可以用来减小监督式学习中偏差的机器学习算法。基于Boosting的集成学习&#xff0c;其代表算法不包括&#xff1f; A. Adaboost B. GBDT C. XGBOOST D. 随机森林 数据分析认证考试介绍&#xff1a;点击进入 题…...

编程日记 2024/10/13 5:27:36

华为云ECS部署DR模式的LVS

1 概述 LVS是linux内核模块&#xff0c;用于4层的负载均衡&#xff0c;它有多个工作模式&#xff0c;例如NAT模式、DR模式。 DR模式的数据流是这样的&#xff1a; client ---> Director Server&#xff08;即LVS服务器&#xff0c;带VIP&#xff09; ---> Real Serve…...

编程日记 2024/10/13 5:25:35

如何在 Jupyter Notebook 执行和学习 SQL 语句（上）

在Jupyter Notebook中使用SQL&#xff0c;你可以通过以下步骤创建一个数据库并连接到该数据库&#xff1a; 1. 安装SQLite和SQLAlchemy SQLite 是一个轻量级的数据库系统&#xff0c;适合本地小型项目。SQLAlchemy 是一个强大的数据库连接工具&#xff0c;可以在Jupyter中方便…...

编程日记 2024/10/13 5:24:34

数据结构-5.7.二叉树的层次遍历

一.演示&#xff1a; 1.初始化队列&#xff1a; 2.根结点入队&#xff1a; 3.判断队列是否为空&#xff0c;此时有根结点&#xff0c;说明不为空&#xff0c;则队头结点即根结点出队并访问&#xff0c;再先进它的左结点&#xff0c;最后进它的右结点&#xff1a; 4.之后对进来…...

编程日记 2024/10/13 5:22:32

RISC-V知识点目录

分支预测 分支预测概述https://blog.csdn.net/zhangshangjie1/article/details/136947089?sharetypeblogdetail&sharerId136947089&sharereferPC&sharesourcezhangshangjie1&spm1011.2480.3001.8118分支指令的方向预测https://blog.csdn.net/zhangshangjie1/a…...

编程日记 2024/10/13 5:21:27

C++11 新特性 学习笔记

C11 新特性 | 侯捷C11学习笔记 笔者作为侯捷C11新特性课程的笔记进行记录&#xff0c;供自己查阅方便 文章目录 C11 新特性 | 侯捷C11学习笔记1.Variadic TemplatesC11支持函数模板的默认模板参数C11在函数模板和类模板中使用可变参数 可变参数模板1) 可变参数函数模板2) 可变…...

编程日记 2024/10/13 5:20:26

Go 语言中的格式化占位符

在 Go 语言中&#xff0c;fmt 包提供了大量的格式化占位符&#xff0c;用于格式化输出不同类型的数据。选择合适的占位符&#xff0c;可以确保输出的内容格式正确、清晰易懂。 常见的占位符&#xff1a; 基本类型 %v&#xff1a;按值的默认格式输出。适用于任何类型。%v&…...

编程日记 2024/10/13 5:19:25

QD1-P5 HTML 段落标签（p）换行标签（br）

本节视频 www.bilibili.com/video/BV1n64y1U7oj?p5 ‍ 本节学习 HTML 标签&#xff1a; p标签 段落br标签 换行 ‍ 一、p 标签-段落 1.1 使用 p 标签划分段落 <p>段落文本</p>示例 <!DOCTYPE html> <html><head><meta charset"…...

编程日记 2024/10/13 5:18:24

Django的模板语法

Django的模板语法 1、初步认识2、原理 1、初步认识 本质上&#xff1a;在HTML中写一些占位符&#xff0c;由数据对这些占位符进行替换和处理。 在views.py中用字典&#xff08;键值对&#xff09;的形式传参&#xff0c;在html文件中用两个花括号来显示单独的值 列表、元组等数…...

编程日记 2024/10/13 5:17:23

【在Linux世界中追寻伟大的One Piece】信号捕捉|阻塞信号

目录 1 -> 信号捕捉初识 2 -> 阻塞信号 2.1 -> 信号其他相关常见概念 2.2 -> 在内核中的表示 2.3 -> sigset_t 2.4 -> 信号集操作函数 2.5 -> sigprocmask 2.6 -> sigpending 3 -> 捕捉信号 3.1 -> 内核如何实现信号的捕捉 3.2 ->…...

编程日记 2024/10/13 5:16:21

信息系统运维管理方案，运维建设文档，运维平台建设方案，软件硬件中间件运维方案，信息安全管理（原件word，PPT，excel）

建设方案目录&#xff1a; 1、智慧运维系统建设背景 2、智慧运维系统建设目标 3、智慧运维系统建设内容 4、智慧运维系统建设技术 5、智慧运维系统建设流程 6、智慧运维系统建设收益 企业对运维管理的需求&#xff1a; 1、提高运维效率&#xff1a;降低运维成本&#xff0c;提高…...

编程日记 2024/10/13 5:14:19

多元统计实验报告内容

1 实验内容 实验目的： 利用R软件进行一些简单的数学运算，通过对简单统计量函数的操作了解R语言的基本操作过程，从而对R语言形成初步的认识。 实验项目名称： R语言软件的安装。R语言中赋值语句的练习。 在R中<-表示赋值，c（）表示数组，X1<-c（）即表示将一组数据赋…...

编程日记 2024/10/13 5:11:14

使用机器学习边缘设备的快速目标检测

论文标题&#xff1a;Fast Object Detection with a Machine Learning Edge Device 中文标题&#xff1a;使用机器学习边缘设备的快速目标检测 作者信息&#xff1a; Richard C. Rodriguez, MSDA Information Systems and Cyber Security Department, The University of Tex…...

编程日记 2024/10/13 5:10:13

Anthropic的CEO达里奥·阿莫迪（Dario Amodei）文章传达他对AI未来的乐观展望

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

编程日记 2024/10/13 5:08:09

Human-M3 多模态姿态估计数据集-初步解读

文章概述（个人总结）：该论文重点提出一个用于人体姿态估计的RGB+点云数据集，针对该多模态数据集，作者阐述了数据集的收集、数据标注以及该数据集的特点。并提出了一个简单的多模态3D人体姿态估计算法，对比其他模型，该方法性能较好。最后总结了该数据集和该方法的限制。 …...

编程日记 2024/10/13 5:05:06

python爬虫 - 进阶正则表达式

&#x1f308;个人主页&#xff1a;https://blog.csdn.net/2401_86688088?typeblog &#x1f525; 系列专栏&#xff1a;https://blog.csdn.net/2401_86688088/category_12797772.html 目录 前言 一、匹配中文 &#xff08;一&#xff09;匹配单个中文字符 &#xff08;二…...

编程日记 2024/10/13 5:04:05

静态路由和nqa 联动实验

nqa 配置 1 test 断端口 很明显是切换到备机上了...

编程日记 2024/10/13 5:03:04

golang用any类型去接收前端传的数字类型的值，类型断言为float64

在 Go 中&#xff0c;使用 any 类型接收前端传来的数字时&#xff0c;通常会发现其被类型断言为 float64。这是因为在 JSON 解码的过程中&#xff0c;Go 的 encoding/json 包会将数字解析为 float64。但如果你在结构体中指明字段为 int 类型&#xff0c;框架会根据字段类型进行…...

编程日记 2024/10/13 5:02:02

5、Spring Boot 3.x 集成 RabbitMQ

一、前言 本篇主要是围绕着 Spring Boot 3.x 与 RabbitMQ 的集成&#xff0c;这边文章比较简单&#xff0c;RabbitMQ 的集成没有太大的变化&#xff0c;这篇文章主要是为了后续的 RabbitMQ 的动态配置做铺垫。 1、Docker 安装 RabbitMQ 2、Spring Boot 3.x 集成 RabbitMQ二、D…...

编程日记 2024/10/13 5:01:01

ENSP搭建基础网络拓扑图

一、ENSP的基本操作 1、配置网关 进入系统视图与退出 <Huawei>system-view [Huawei]quit 进入G0/0/0接口后配置ip [R1]interface GigabitEthernet 0/0/0 [R1-GigabitEthernet0/0/0]ip address 192.168.1.1 24查询所有接口的ip配置 [R1]display ip interface brief…...

编程日记 2024/10/13 5:00:00

尚硅谷rabbitmq 2024 消息可靠性答疑二 第22节

returnedMessage()只有失败才调用&#xff0c;confirm()成功失败了都会调用&#xff0c;为什么&#xff1f; 在RabbitMQ中&#xff0c;消息的确认和返回机制是为了确保消息的可靠传递和处理。confirm和returnedMessage方法的调用时机和目的不同&#xff0c;因此它们的行为也有…...

编程日记 2024/10/13 4:57:55

在 Ubuntu 上安装 Whisper 支撑环境（ffmpeg、PyTorch）的教程（2024亲测可用）

在 Ubuntu 上安装 Whisper 的教程 以下是如何在 Ubuntu 系统上安装 Whisper 以进行视频转录的详细步骤。 步骤 1&#xff1a;更新系统 首先更新你的 Ubuntu 系统&#xff0c;确保安装最新的软件包&#xff1a; sudo apt update && sudo apt upgrade -y步骤 2&#…...

编程日记 2024/10/13 4:55:53

vue+echarts实现雷达图及刻度标注

文章目录 前言代码实现实现效果总结 前言 最近项目有做数据可视化 大屏 不免再次使用些echarts应用 记录下其中echarts雷达图的实现 代码实现 先上代码 <template><div class"container"><div ref"chart" style"width: 500px; heig…...

编程日记 2024/10/13 4:54:52

【进阶OpenCV】 （9）--摄像头操作---＞答题卡识别改分项目

文章目录 项目&#xff1a;答题卡识别改分1. 图片预处理2. 描绘轮廓3. 轮廓近似4. 透视变换5. 阈值处理6. 找每一个圆圈轮廓7. 将每一个圆圈轮廓排序8. 找寻所填答案&#xff0c;比对正确答案8.1 思路8.2 图解8.3 代码体现 9. 计算正确率 总结 项目&#xff1a;答题卡识别改分 …...

编程日记 2024/10/13 4:53:51

实时从TDengine数据库采集数据到Kafka Topic

实时从TDengine数据库采集数据到Kafka Topic 一、认识TDengine二、TDengine Kafka Connector三、什么是 Kafka Connect&#xff1f;四、前置条件五、安装 TDengine Connector 插件六、启动 Kafka七、验证 kafka Connect 是否启动成功八、TDengine Source Connector 的使用九、添…...

编程日记 2024/10/13 4:52:50

Linux -- 初识动静态库

目录 为什么要有库&#xff1f; 静态库 什么是静态库&#xff1f; 特点 优点 缺点 动态库 什么是动态库&#xff1f; 优点 缺点 编译器会选择哪个库&#xff1f; 为什么要有库&#xff1f; 库的存在是为了提高软件开发的效率、促进代码复用以及简化维护工作。通过使用…...

编程日记 2024/10/13 4:51:49