d3js mysql_D3.js入门指南

近期略有点诸事不顺,趁略有闲余之时,玩起D3.js。之前实际项目中主要是用各种chart如hightchart、echarts等,这些图形库玩起来貌都是完美的,一切皆可配置,但几年前接触了D3之后,觉得前面那chart类库局限的地方在于,基本不可定制;而D3呢,你说了算,你想画出什么样的图,你说了算,自由度很大,当时就有点膜拜和仰慕,小打小闹的玩了几下,没有沉下心来专心去玩,当时觉得真的很难。不理解,也看不进去。

后面因为接触了react、redux,接触了函数式编程。再回过头来从新捣鼓起D3来,感觉没那么困难了,D3其实也有点函数式编程的思路。别被标题吓跑哈,脚踏实地加点毅力D3应该也是可以上手的。

费话不多说,先上一张让你逆天的数据可视化的效果图,点我查看在线效果

cec58010244c2168425b0e418a4f1595.png

D3.js基础

了解SVG图作图

为什么要学习SVG图呢?因为D3.js堪称SVG中的jQuery,当然你如果想用D3输出Canvas图也可以,但SVG图操作起来更加灵活,更加方便调试,在Chrome中调试可以让你飞起来。

学习D3.js的语法

语法是必需的,建议自行去官网上学习其语法,或者借/买一本书来同步学习,先尝试实现简单的图形,如果可以的话最好了解一下函数式编程的curry与compose思想,不建议一开始就去接触高大上的众多在线Demo,这样会容易让你误入深渊不能自拔,真的就从入门到放弃。

学习D3.js的编程思路

1)语法其实可以体现其编程思路,起步当然是学习其强大的选择器,下面感觉一下

48304ba5e6f9fe08f3fa1abda7d326ab.png

d3.select("body").style("background-color", "black"); // 直接选择 ->并设置属性

d3.selectAll("p").style("color", function() { // 选择 -> 动态设置属性

return "hsl(" + Math.random() * 360 + ",100%,50%)";

});

d3.selectAll("p") // 选择 -> 绑定数据 -> 动态设置属性

.data([4, 8, 15, 16, 23, 42])

.style("font-size", function(d) { return d + "px"; });

48304ba5e6f9fe08f3fa1abda7d326ab.png

2)接着是理解 Update,Enter 和 Exit 的思路

48304ba5e6f9fe08f3fa1abda7d326ab.png

// Update…

var p = d3.select("body") // 直接把数据绑定到Dom并输出,数组元素个数与p节点的个数一致就全部更新文本,如果不一致,就只更新现有p节点的文本,多余的数据会被保存起来,看下面会用到

.selectAll("p")

.data([4, 8, 15, 16, 23, 42])

.text(function(d) { return d; });

// Enter…[常用]

p.enter().append("p") // 如果不一致,数组元素个数比p节点多,就插入p节点补足并相应更新文本

.text(function(d) { return d; });

// Exit…[常用]

p.exit().remove(); // 如果不一致,数组元素个数比p节点少,就删除多余的p节点

48304ba5e6f9fe08f3fa1abda7d326ab.png

3) 然后要学习D3的画图一般思路,比如要画一个线状图,那么我们:

把输入的原始数据转化成为标准的D3可接受的数据格式 -> 根据原始数据定义好x轴函数、y轴函数和定义好作图方式(如d3.line) -> 在SVG上面画出x轴y轴、根据原始数据结合x轴及y轴函数作线状图 -> 再画出标题等细节的东西

4) 最后,给已经完成的图形添加动画效果

没有动画效果的图形看上去会比较乏味。动画基本写法如下:

// 把所有圆圈改变半径

d3.selectAll("circle").transition() // 定义动画

.duration(750) // 动画持续时间

.delay(function(d, i) { return i * 10; }) // 元素动画要延时多少时间开始

.attr("r", function(d) { return Math.sqrt(d * scale); }); // 设置最后效果

D3.js实战项目

注意:下面代码因为结合了React,javascript使用的是ES6,D3版本是最新的V4版,不熟悉的话自行恶补基础。

一、D3实现简单柱状图[在线demo][源代码]

295b6a3e44ef6a346249e0a33d9c7c3a.png

二、D3实现简单简单面积图[在线demo][源代码]

c8a587ebcd20b6f5aec872a924f70da8.png

三、D3实现简单简单饼图、圆环图[在线demo][源代码]

066f37b9d26d014ab8a785f65f5d4785.png

四、D3实现径向堆栈柱状图[在线demo][源代码]

a8f329efe1cca68926e243de9aa9d83a.png

五、D3实现简单弦图[在线demo][源代码]

2e1c80fea927f66ce1c3ac0060a8c027.png

六、D3实现简单打包图[在线demo][源代码]

74819730aefc23978c52feb4c2bad959.png

七、D3实现雷达图[在线demo][源代码]

f8e5b0977b4a33ad3b5a275f9c04b543.png

八、D3实现力导向图[在线demo][源代码]

e0200eae6dc7f21b49480f35a13418fe.png

九、D3实现中国地图[在线demo][源代码]

a4aaceb3b0e887e23952fcff4fa70c68.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/336911.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker 镜像选择_为什么选择Docker?

docker 镜像选择容器并不是什么新鲜事物,但是实现它们总是比需要的要复杂一些。 Docker在简化容器方面取得了长足的进步,并从此引爆了整个世界。 让我们看看为什么。 为什么Docker成为家喻户晓的名字 Docker不是很老。 2014年5月,当我写了一…

layui templet格式化_layui使用templet格式化表格数据的方法

增加js/*---------------------格式化时间开始--------------------------*///对Date的扩展,将 Date 转化为指定格式的String//月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,//年(y)可以用 1-4 个占位符,毫秒(S)只能用…

设计模式示例_代理设计模式示例

设计模式示例本文是我们名为“ Java设计模式 ”的学院课程的一部分。 在本课程中,您将深入研究大量的设计模式,并了解如何在Java中实现和利用它们。 您将了解模式如此重要的原因,并了解何时以及如何应用模式中的每一个。 在这里查看 &#x…

mysql insert 字符集_有关 MySQL 字符集的注意事项-爱可生

本文关键字:字符集、建库建表一、数据库和字符集1. 建库时指定创建数据库时,显式指定字符集和排序规则,同时,当切换到当前数据库后,参数 character_set_database,collation_database 分别被覆盖为当前显式指…

c#发送讯息_企业讯息

c#发送讯息本文是我们名为“ EAI的Spring集成 ”的学院课程的一部分。 在本课程中,向您介绍了企业应用程序集成模式以及Spring Integration如何解决它们。 接下来,您将深入研究Spring Integration的基础知识,例如通道,转换器和适…

mysql触发器中case语句_一个很好的触发器例子(case when)

CREATE OR REPLACE TRIGGER TR_CGD1BEFORE UPDATE OR INSERT OR DELETE ON BB_MJ_CGD1_TBFOR EACH ROWDECLAREV_COUNT NUMBER;BEGINCASEWHEN UPDATING OR INSERTING THENIF :NEW.DJZT 结束 THEN:NEW.DJZT : 结束;ELSESELECT COUNT(*)INTO V_COUNTFROM BB_MJ_KCRKD2_TB RKD2WHE…

java cr_WildFly 10 CR 2发布– Java EE 7,Java 8,Hibernate 5,JavaScript支持热重载

java cr昨天,WildFly团队发布了最新版本的WildFly 10 。 CR2很可能是预计于十月份发布最终版本之前的最后一个版本。 即使主要支持的Java EE规范是7,WildFly 8和WildFly 9也提供了许多新功能,而WildFly 9和WildFly 9现在制作了三个服务器版本…

python位置参数ppt_如何在Python中使用一个或多个相同的位置参数?

介绍..如果我们正在编写一个对两个数字执行算术运算的程序,则可以将它们定义为两个位置参数。但是由于它们是相同种类的/ python数据类型的参数,因此使用nargs选项告诉argparse您确实需要两种相同的类型可能更有意义。怎么做..1.让我们编写一个程序来减去…

java设计模式教程_Java设计模式教程

java设计模式教程课程大纲 架构和计算机科学中的设计模式是记录特定专业领域中设计问题的解决方案的正式方法。 这个想法是由建筑师Christopher Alexander在建筑领域引入的,并已被修改为包括计算机科学在内的其他各个学科。 设计模式是针对软件设计中给定上下文中常…

python剑指offer面试题_剑指Offer(Python语言)面试题38

面试题38:字符串的排列题目:输入一个字符串,打印出该字符串中字符的所有排列。例如,输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca和cba。# -*- coding:utf-8 -*-class Solution:def Permutation(se…

侬娜·杰尔_杰尔·地狱

侬娜杰尔什么是JAR地狱? (或者是classpath地狱?还是依赖地狱?)在考虑使用Maven或OSGi等现代开发工具时,哪些方面仍然有意义? 有趣的是,似乎没有对这些问题的结构化答案(…

cmake 安装mysql5.6_CMAKE安装MYSQL 5.6.10

mysql5.6.10不支持configure安装了,提供了CMAKE安装方式 #sudo groupadd mysql #sudo useradd mysql -g mysql #sudo mkdir -p /home/mysql/data #sudo mkdir /usr/local/mysql #sudo mkdir /var/log/mysql #sudo chown -R mysql:mysql /home/mysql/data #sudo cho…

java 多线程变量可见性_Java多线程:易变变量,事前关联和内存一致性

java 多线程变量可见性什么是volatile变量? volatile是Java中的关键字。 您不能将其用作变量或方法名称。 期。 我们什么时候应该使用它? 哈哈,对不起,没办法。 当我们在多线程环境中与多个线程共享变量时,通常使用v…

Mysql运行在内核空间_思考mysql内核之初级系列6—innodb文件管理 | 学步园

在上一篇里面,bingxi和alex思考了information_schema,这个一直在innodb外围打转。没有进入到innodb的内部。在后续的文章中,以innodb的为主,逐个思考。Bingxi和alex今天了解了fil文件管理。对应的文件为:D:/mysql-5.1.…

pcl_openmap_OpenMap教程第2部分–使用MapHandler构建基本地图应用程序–第1部分

pcl_openmap1.简介 在第一个教程中,我们创建了一个基本的OpenMap GIS应用程序,该应用程序在JFrame中显示一个从文件系统加载的具有一个形状图层的地图。 该教程基于com.bbn.openmap.app.example.SimpleMap 。 在该教程中,我们使用了以下OpenM…

mysql7.5安装教程_CentOS7.5下yum安装MySQL8图文教程

卸载MariaDB1.列出所有安装的MariaDB rpm 包rpm -qa | grep mariadb2.强制卸载rpm -e --nodeps mariadb-libs-5.5.60-1.el7_5.x86_64安装MySQL1. 环境CentOS7.52. 获取MySQL最新版 rpm包yum仓库下载MySQLyum localinstall https://repo.mysql.com//mysql80-community-release-e…

字符串url获取参数_如何从URL查询字符串获取示例参数或将其附加到URL查询字符串(示例)?...

字符串url获取参数让我们剖析几个简单的用例,并查看视图参数的工作原理(视图参数名称不是强制性的,以匹配通过URL查询字符串传递的请求参数,但在本文中,我们将重点讨论这种情况): 情况1 在inde…

mysql和sqlserver分页的区别_关于SQLServer和MySQL 查询分页语句区别

首先来定义几个要用到的参数(例子)t_user数据表int currentPage ; //当前页int pageRecord ; //每页显示记录数关于SqlServer数据库分页SQL语句为:String sql "select top "pageRecord " * from t_user where id not in (select top "(currentPage-1)*pag…

java 微型数据库_Java 9代码工具:使用Java微型基准测试工具的实践会话

java 微型数据库用肉眼看,基准测试似乎只是确定执行某些代码需要花费多长时间的简单问题。 但是,通常情况下,这是幼稚的方法。 提供具有准确和可重复结果的有意义的基准并非易事。 在本文中,我们将向您介绍OpenJDK代码工具项目&a…

mysql快速随机_MySQL随机取数据最高效的方法

mysql随机取数据最高效率的方法发现在SQL语句里有一个 ORDER BY rand() 这样的一个语句,这个说是用着方便,但是效率实在是太低了,于是我用了以下的方法来优化,就是用JOIN表的方法来达到这个取随机数据行的方法,你可以用…