一、初识D3.js

D3.js（D3 或 Data-Driven Documents）是一个使用动态图形，基于数据操作文档的，进行数据可视化的 JavaScript 程序库。D3 帮助您通过使用 HTML、SVG 和 CSS使数据栩栩如生，产生交互式的数据展示效果——分层条形图、动画树状图、力导向图、等高线、散点图⋯⋯。且 D3 提供了现代浏览器的全部功能，无需将束缚在特定框架中，可以与 Vue、React 等结合使用，提供强大的可视化组件和数据驱动的 DOM 操作方法。目前最新版本的 D3 已经更新到了 7.4 版本（截止到2022.6月）。D3 是一个开源项目，其源码托管于 GitHub，地址为https://github.com/d3/d3，官网地址为 https://d3js.org/。另外，官方的 Wiki 手册和推荐资源可在https://github.com/d3/d3/wiki中找到。

放几个图让大家感受一下d3的强大：

这些图都是用D3画出来的，还有更多案例感兴趣的朋友可以去官网看看，点击这里

D3.js的特点：

(1) 使用 Web 标准：D3 是一个非常强大的可视化工具，用于创建交互式数据可视化。它利用现代网络标准：SVG、HTML 和 CSS 来创建数据可视化。
(2) 数据驱动：D3 是数据驱动的。它可以使用静态数据或从远程服务器以不同格式（如数组、对象、CSV、JSON、XML 等）获取数据来创建不同类型的图表。
(3) DOM 操作：D3 允许您根据数据操作文档对象模型 (DOM)。
(4) 数据驱动元素：它使您的数据能够动态生成元素并将样式应用于元素，表格、图形等都支持。
(5) 动态属性：D3 可以灵活地为其大部分功能提供动态属性。属性可以指定为数据的函数。这意味着您的数据可以驱动您的样式和属性。
(6) 可视化类型：对于 D3，尽管没有标准的可视化格式，但它允许你自由发挥，创建从 HTML 表格到饼图、图形、条形图到地理空间地图等任何内容。
(7) 自定义可视化效果：由于 D3 使用 Web 标准，因此您可以完全控制可视化功能。
(8) 交互和动画：D3 通过 duration()、delay() 和ease() 等函数为动画提供了很好的支持，能快速响应用户交互的需要。

二、安装使用

1.在网页中引入

方法一：从官网处下载 D3.js 的压缩包文件并解压，引入本地文件。

当前官网可下载到最新 7.4.4版本的 D3，点击这里下载
解压后，在 HTML 中导入相关的 js 文件即可使用 D3。（package/dist 文件夹下的 d3.js 或 d3.min.js，其中含 min 的文件为压缩后版本）
方法二：直接通过网络上的 D3 地址，引用链接到 HTML 中。

<script src="https://d3js.org/d3.v7.min.js"></script>

2.使用npm

可以通过npm install d3来安装

三、学习几个基础操作方法

1、元素选择

D3 可以非常简洁地操作 HTML 中的 DOM 元素，我们通过d3.select()（选择第一个找到的元素）或 d3.selectAll()（选择所有找到的元素）选择元素后返回了对象，这就是选择集。我们可以根据元素的不同特性来选择出想要的对象，根据属性值、class、ID 等都可以进行选择。
而多次连续调用的.style()等函数被称为链式语法，和 JQuery 中的语法颇为类似。此处我们调用.style()改变了元素的样式，而 D3 还可以提供设置属性（.attr()）、添加（.append()）、更改文本内容（.text()）等方法，能满足用户大部分的需求。

 var e = d3.select("body").selectAll("p");// 选择所有 <p> 标签的网页元素e.style("color","blue").style("font-size","72px");// 将颜色样式改为 blue，用链式语法继续将文本大小修改为 72px

2、数据绑定

D3 可以将数据绑定到 DOM 上去（DOM 能将 HTML 文档表达为树结构，数据绑定与 DOM 绑定即是让 HTML 标签与数据进行绑定）。比如，让的段落元素 p 标签与字符串变量 “Hello” 绑定，绑定后，当需要依靠该数据操作元素时，会更为方便。
D3 中有两个函数可以绑定数据：
(1) datum()：绑定一个数据到选择集上。
(2) data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定。（更常用）

举一个例子，当前有三个段落元素如下：
<body><p> 张三 </p><p> 李四 </p><p> 王五 </p></body>

方式一：使用datum()绑定。假设有一个字符串 “China”，可将其分别与三个段落 p元素绑定：

var str = "China";var body = d3.select("body");var p = body.selectAll("p");p.datum(str);p.text(function(d, i){return i +": "+ d;});

输出如下：

0: China
1: China
2: China

在上面的代码中，用到了一个匿名函数function(d, i)。当选择集需要使用被绑定的数时，常需要这么使用。其包含两个参数，其中 d 代表数据，即与某元素绑定的数据，而 i 代表索引，代表数据的索引号，从 0 开始。

方式二：使用data()绑定。有一个数组var arr = [“a”, “b”, “c”];，接下来要分别将数组的各元素绑定到三个段落元素上。
绑定后，其对应关系应为张三-a，李四-b，王五-c。我们调用data()函数绑定数据，并替换三个段落元素的字符串为被绑定的字符串，代码如下：

 var arr = ["a", "b", "c"];var body = d3.select("body");var p = body.selectAll("p");p.data(arr).text(function (d, i) {return d;
});

此处也用到了一个无名函数 function(d, i)，其对应的情况为 i=0, 1, 2 时，d 分别为 a, b, c。
此时，三个段落 p 元素与数组 arr 的三个字符串是一一对应的。因此，在函数function(d, i) 直接 return d 即可。

今天先到这里，等我接着更，我们一起学D3

【一起学d3.js】（一）相关推荐

D3.js的v5版本入门教程（第一章）—— 如何在项目中使用D3.js
D3.js的v5版本入门教程(第一章) 1.需要的一些工具这个其实随便!最简单的就是建一个.txt文件就可以敲起代码来!作者本人用的是myeclipse(主要需要安装tomcat),因为写的是前端, ...
d3.js图表_如何使用D3.js建立历史价格图表
d3.js图表逐步可视化财务数据集的方法 (A step by step approach towards visualizing financial datasets) It is a chall ...
D3.js 教程: 使用 JavaScript 创建可交互的柱状图
原文链接:D3.js Tutorial: Building Interactive Bar Charts with JavaScript 译者:OFED 最近,我们有幸参与了一个机器学习项目,该项目涉 ...
d3.js 简介和安装
最近一直在做大数据可视化方面的事,想着,把目前比较流行的可视化开源项目也学习一下,于是,打算花点时间写几个d3的例子,也算是一个入门级的学习,废话不多说,首先介绍一下d3,后面我们直接看例子. D3 ...
python qt gui与数据可视化编程 kindle_Kindle电子书 – D3.js数据可视化实战手册 azw3...
豆瓣评分:7.0 27人评价简介: 如今这个互联网时代,人们每天都产生海量的数据,如果直接面对这些数据,可能让人无从下手.将数据可视化,用形象立体的形式将其展现,有利于分析其中的关联,攫取可能存在的 ...
D3.js的v5版本入门教程（第六章）——做一个简单的图表
D3.js的v5版本入门教程(第六章) 从这一章开始,进入正式的d3,js绘图阶段,有了前面几章基本知识的积累,这样看接下来的绘图代码才不会觉得比较辛苦做一个简单的图表为了做一个简单的图表,我们还 ...
每周小节-2 d3-zoom,pan,brush阅读心得 d3.js on angular读书笔记
总结一下这周学习代码的心得: 工程地址是https://github.com/msand/d3zoompanbrushchart 代码的主要工作大致是这样的: 0.初始化(建图,坐标轴,数据,线段) ...
D3.js的v5版本入门教程（第十四章）—— 力导向图
D3.js的v5版本入门教程(第十四章) 这一章我们来绘制一个力导向图,什么叫力导向图,通俗一点将就是有节点和线组成,当鼠标拖拽一个节点时,其他节点都会受到影响(力导向图有多种类型,本章绘制的效果就是 ...
利用D3.js快速绘制力导向图
碎碎念: 最近课题需要基于图论和力导向图可视化每个脑电通道之间的连接性,MATLAB画的效果差强人意,于是上网搜寻到JavaScript 的一个函数库--D3.js,想快速得到数据的可视化结果简介D ...

【一起学d3.js】（一）

文章目录