D3
文章平均质量分 92
编程轨迹_
修罗社区 | 掘金优秀创作者 | 清华大学出版社签约作者 | Web3 开发者 | CSDN 银牌讲师 | 蓝桥云课2021年度人气作者Top2 | 工信部蓝桥认证命题人 | CSDN 博客专家 | 腾讯云2022 年度优秀作者 | 阿里云专家博主 | 华为云享专家 | 著作:《前端面试复习笔记》|《Web3 开发系列教程》|《ThreeJS 在网页中创建动画》|《ElementUI 详解与实战》|《PWA 渐进式Web应用开发》
展开
-
【D3.js - v5.x】(7)绘制地图 | Geo布局 | 完整代码
地图在数据可视化中,地图是很重要的一部分。很多情况会与地图有关联,如中国各省的人口多少,GDP多少等,都可以和地图联系在一起。地图数据的获取制作地图需要 JSON 文件,将 JSON 的格式应用于地理上的文件,叫做 GeoJSON 文件。本文就是用这种文件绘制地图。那么如何获取中国地图的 GeoJSON 文件呢? 如下链接,打开并下载至本地。https://geo.datav.aliyu......原创 2020-04-28 10:52:42 · 3728 阅读 · 4 评论 -
【D3.js - v5.x】(6)绘制树状图 | 层级布局 | 附完整代码
树状图在d3 中,绘制树状图,要用到层级布局这个概念:d3.hierarchy(data[, children])根据指定的层次结构数据构造一个根节点。指定的数据 data 必须为一个表示根节点的对象。比如:{ "name": "Eve", "children": [ { "name": "Cain" }, { "name": "S.........原创 2020-04-28 09:51:13 · 5481 阅读 · 1 评论 -
【D3.js - v5.x】(5)绘制力导向图 | 附完整代码
力导向图力导向图(Force-Directed Graph),是绘图的一种算法。在二维或三维空间里配置节点,节点之间用线连接,称为连线。各连线的长度几乎相等,且尽可能不相交。节点和连线都被施加了力的作用,力是根据节点和连线的相对位置计算的。根据力的作用,来计算节点和连线的运动轨迹,并不断降低它们的能量,最终达到一种能量很低的安定状态。力导向图能表示节点之间的多对多的关系。初始数据如下:......原创 2020-04-27 18:42:05 · 5449 阅读 · 0 评论 -
【D3.js - v5.x】(4)绘制饼图 | 附完整代码
饼图https://www.d3js.org.cn/document/d3-shape/#pies定义一个布局:var pie = d3.pie();返回值赋给变量 pie,此时 pie 可以当做函数使用。var piedata = pie(dataset);将数组 dataset 作为 pie() 的参数,返回值给 piedata。如此一来,piedata 就是转换后的数据。......原创 2020-04-23 19:03:33 · 1830 阅读 · 0 评论 -
【D3.js - v5.x】(1)选择集 | 绑定数据 | 插入元素 | 删除元素
选择集使用 d3.select() 或 d3.selectAll() 选择元素后返回的对象,就是选择集。D3 能够连续不断地调用函数,形如:d3.select().selectAll().text()这称为链式语法,和 JQuery 的语法很像.d3.select():是选择所有指定元素的第一个d3.selectAll():是选择指定元素的全部这两个函数返回的结果称为选择集。例......原创 2020-04-18 20:23:57 · 494 阅读 · 0 评论 -
【D3.js - v5.x】(2)绘图 | 比例尺 | 坐标轴 | 柱状图 | 过渡
绘图:以柱状图为例要绘图,首要需要的是一块绘图的“画布”。HTML 5 提供两种强有力的“画布”:SVG 和 Canvas。SVG 是什么SVG,指可缩放矢量图形(Scalable Vector Graphics),是用于描述二维矢量图形的一种图形格式,是由万维网联盟制定的开放标准。 SVG 使用 XML 格式来定义图形,除了 IE8 之前的版本外,绝大部分浏览器都支持 SVG,可将 SV......原创 2020-04-18 21:17:44 · 1426 阅读 · 0 评论 -
【D3.js - v5.x】(3)Update & Enter & Exit | 交互 | 布局
Update、Enter、ExitUpdate、Enter、Exit 是 D3 中三个非常重要的概念,它处理的是当选择集和数据的数量关系不确定的情况。什么是 Update、Enter、Exit假设,在 body 中有三个 p 元素,有一数组 [3, 6, 9],则可以将数组中的每一项分别与一个 p 元素绑定在一起。但是,有一个问题:**当数组的长度与元素数量不一致(数组长度 > 元素数......原创 2020-04-23 09:52:37 · 684 阅读 · 0 评论 -
【D3使用教程】(7) 结语 | 附加学习网站
最后和大家分享一些学习网站,平常在使用D3的时候,多逛一些,或者遇到问题的时候去问,都会在这一过程中帮助你成长起来。所以,虽然在这份1-6的D3教程中,我们主要讲解的是D3常用的操作,对于一些具体的方面,没有过多提及,需要大家在后面的学习中自我学习。希望你会有所收获! 同时欢迎留言交流!d3js.orggithub.com/mbostock/d3/wiki/Gallery (...原创 2018-03-08 17:53:53 · 560 阅读 · 0 评论 -
【D3使用教程】(6) 交互操作之事件监听
事件监听在之前的文章中写到,为了让图表具有交互能力,我们必须针对一些事件来编写代码,以便监听某些DOM元素发生的这些事件。D3中,on()方法对于绑定D3元素集非常方便。通常情况下,我们会一次性为多个元素绑定事件监听器,所要改变的只是将select()换成选择多个元素的selectAll(),再把选择的元素集交给on()即可。这里我们以柱状图为例,svg.selectAll...原创 2018-03-08 15:45:55 · 5820 阅读 · 2 评论 -
【D3使用教程】(5) 动态更新与过渡动画
数据总是在变化的,那么我们要如何将变化的数据反映到图表上呢? 在D3中,这些变化通过更新进行处理。而过渡通过使用动画用于处理视觉上的展示。(1)更新首先,我们定义一个序数比例尺: let xScale = d3.scale.ordinal()//定义一个序数比例尺,用于处理序数注:序数是一些有固定顺序的一些类别,如:新生、大二、大三、毕业班B等、A等、AA等非常不喜欢...原创 2018-03-07 14:30:01 · 4916 阅读 · 0 评论 -
【D3使用教程】(4) 添加数轴
(1)设置数轴D3的数轴实际商是由程序员自己来定义参数的函数。调用数轴函数,会生成数轴相关的可见元素,包括轴线、标签和刻度 。使用d3.svg.axis()能创建通用的数轴函数: var xAxis = d3.svg.axis();但是你要注意,在使用之前你要告诉这个函数,是基于什么比例尺工作的。例如序数比例尺。同时,你可以设置标签相对数轴显示的位置,默认出现在轴线的下方。通常而...原创 2018-01-27 20:52:41 · 1534 阅读 · 0 评论 -
【D3使用教程】(1) 开始 | 加载数据
一、数据(1)引言在可视化编程的语境下,数据保存在数字化文件中,一般是文本格式或二进制格式。当然,并不是只有文本内容才算数据,那些表示图像、音频、视频、数据库、流、模型、文档等一切比特和字节也是数据。对于D3和浏览器可视化的角度来说,我们只讨论文本数据。即那些可以表现为数值或字符串的东西。如果你可以把数据保存到.txt纯文本文件,或者.csv逗号分隔值文件,或者.json文件,那么...原创 2017-12-21 11:47:43 · 3379 阅读 · 0 评论 -
【D3使用教程】(3) 添加比例尺
“比例尺是一组把输入或映射为输出范围的函数”。—–Mike Bostock一般而言,任意数据集中的值不可能刚好与图表中的像素尺度一一对应。而D3中,比例尺要做的就是将数据值映射为可视图形中的可替代值得手段。D3中,比例尺是一种函数,带参数。你可以定义任意多个比例尺函数。本节中,我们将讨论线性比例尺。当然,还有序数、对数、平方根比例尺等等,但这里我们不做讨论,大家可以以线性比例尺...原创 2017-12-27 16:31:06 · 1962 阅读 · 0 评论 -
【D3使用教程】(2) 绘制柱状图与散点图
(1)绘制一幅柱状图 严格来说,柱形图是指矩形沿垂直方向度量的图形;条形图,是沿水平方向度量的图形。多数时候我们常常没有区分这两个概念。首先我们来尝试绘制一幅柱状图。注:开始之前,先在页面中引入jquery和d3.js文件。 <style> div.bar { display: inline-block; ...原创 2017-12-23 13:22:21 · 3174 阅读 · 0 评论