D3.js的v5版本入门教程(前篇)—— 关于

2024-03-13 06:10
文章标签 js 版本 入门教程 v5 前篇 d3

本文主要是介绍D3.js的v5版本入门教程(前篇)—— 关于,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

D3.js入门教程

    1、D3.js简介

        D3.js是一个强大的数据可视化js语言,可以利用svg在网页上展示各种精美的矢量图

    2、D3.js的官方

        官网:https://d3js.org/

        官方API:https://github.com/d3/d3/blob/master/API.md

    3、适合人群

        本教程适合需要在网页前端做数据可视化图表开发、对数据可视化感兴趣、为图形痴狂,以及想了解并学习D3.js的读者

    4、编写原因

        D3.js相对较新,目前版本也多样,版本之间变化也比较大,目前最新版本是v5,但是目前网上面的好的入门教程大多是v3版本,v5版本的教程少得可怜,而且很分散,(我在学习的过程中没有找到v5版本比较好的教程,使自己看官方API,然后百度关键字,花漫长时间才找到正确编写方法),v5和v3版本差别还是很大的,而且最近因为参加学校的一个创新实训,需要做数据可视化,就学了这个

   5、参考文献

        我写这篇教程的灵感来自于这片教程,大家可以发现:章节标题差不多是一样的。但是别人的是v3版本的 教程,写的很好,我写的是v5版本的教程,因为版本之间的差别比较大,虽然有那么好的v3版本教程,但是我在学习的过程中还是遇到很多阻碍!所以想将经验分享出来

    参考资料链接:http://wiki.jikexueyuan.com/project/d3wiki/

    6、教程章节

        D3.js的v5版本入门教程(第一章)—— 如何在项目中使用D3.js

        D3.js的v5版本入门教程(第二章)—— 第一个程序 Hello World

        D3.js的v5版本入门教程(第三章)—— 选择元素和绑定数据

        D3.js的v5版本入门教程(第四章)—— 理解Update、Enter、Exit

        D3.js的v5版本入门教程(第五章)—— 选择、插入、删除元素

        D3.js的v5版本入门教程(第六章)——做一个简单的图表

        D3.js的v5版本入门教程(第七章)—— 比例尺的使用

        D3.js的v5版本入门教程(第八章)—— 坐标轴

        D3.js的v5版本入门教程(第九章)——完整的柱状图

        D3.js的v5版本入门教程(第十章)——让图表动起来

        D3.js的v5版本入门教程(第十一章)——交互式操作

        D3.js的v5版本入门教程(第十二章)—— D3.js中各种精美的图形

        D3.js的v5版本入门教程(第十三章)—— 饼状图

        D3.js的v5版本入门教程(第十四章)—— 力导向图

        D3.js的v5版本入门教程(第十五章)—— 树状图

        D3.js的v5版本入门教程(第十六章)—— 中国地图

    7、精美的SVG图(预览需要用电脑才能打开链接)

        在学习之前,先来放一波“毒”,看看从本教程你能学到什么——SVG图,太美了!!!

        1、简单图表1

        链接:点击预览

        2、简单图表2

        链接:点击预览

        3、简单图表3

        链接:点击预览

        4、完整的柱状图

        链接:点击预览

        5、动态柱状图

        链接:点击预览

        6、会变色的柱状图

        链接:点击预览

        7、饼状图

        链接:点击预览

        8、力导向图

        链接:点击预览

        9、树状图

        链接:点击预览

    8、关于调试

        本教程中出现的控制台指的都是chrome浏览器中的调试窗口的控制台

    9、给我打赏

        

(如果你喜欢这篇教程的话!如果这篇教程对你有帮助的话!可以支持我得意

 

(翻外篇)d3.js在网页端可视化neo4j图数据库

    为了让大家更好的学习d3.js,“d3.js在网页端可视化neo4j图数据库”这是一个比较综合的项目——利用neo4j的java驱动API从neo4j中取数据,并利用d3.js在网页端进行可视化。大家在学完基础课程后可以做一下这个项目,进行巩固。点击下面链接进行查看:d3.js可视化neo4j图数据库项目专栏

这篇关于D3.js的v5版本入门教程(前篇)—— 关于的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/803871

相关文章

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

Linux卸载自带jdk并安装新jdk版本的图文教程

《Linux卸载自带jdk并安装新jdk版本的图文教程》在Linux系统中,有时需要卸载预装的OpenJDK并安装特定版本的JDK,例如JDK1.8,所以本文给大家详细介绍了Linux卸载自带jdk并... 目录Ⅰ、卸载自带jdkⅡ、安装新版jdkⅠ、卸载自带jdk1、输入命令查看旧jdkrpm -qa

Tomcat版本与Java版本的关系及说明

《Tomcat版本与Java版本的关系及说明》:本文主要介绍Tomcat版本与Java版本的关系及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Tomcat版本与Java版本的关系Tomcat历史版本对应的Java版本Tomcat支持哪些版本的pythonJ

IDEA中Git版本回退的两种实现方案

《IDEA中Git版本回退的两种实现方案》作为开发者,代码版本回退是日常高频操作,IntelliJIDEA集成了强大的Git工具链,但面对reset和revert两种核心回退方案,许多开发者仍存在选择... 目录一、版本回退前置知识二、Reset方案:整体改写历史1、IDEA图形化操作(推荐)1.1、查看提

JDK多版本共存并自由切换的操作指南(本文为JDK8和JDK17)

《JDK多版本共存并自由切换的操作指南(本文为JDK8和JDK17)》本文介绍了如何在Windows系统上配置多版本JDK(以JDK8和JDK17为例),并通过图文结合的方式给大家讲解了详细步骤,具有... 目录第一步 下载安装JDK第二步 配置环境变量第三步 切换JDK版本并验证可能遇到的问题前提:公司常

nvm如何切换与管理node版本

《nvm如何切换与管理node版本》:本文主要介绍nvm如何切换与管理node版本问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录nvm切换与管理node版本nvm安装nvm常用命令总结nvm切换与管理node版本nvm适用于多项目同时开发,然后项目适配no

Mybatis从3.4.0版本到3.5.7版本的迭代方法实现

《Mybatis从3.4.0版本到3.5.7版本的迭代方法实现》本文主要介绍了Mybatis从3.4.0版本到3.5.7版本的迭代方法实现,包括主要的功能增强、不兼容的更改和修复的错误,具有一定的参考... 目录一、3.4.01、主要的功能增强2、selectCursor example3、不兼容的更改二、

pytorch+torchvision+python版本对应及环境安装

《pytorch+torchvision+python版本对应及环境安装》本文主要介绍了pytorch+torchvision+python版本对应及环境安装,安装过程中需要注意Numpy版本的降级,... 目录一、版本对应二、安装命令(pip)1. 版本2. 安装全过程3. 命令相关解释参考文章一、版本对

springboot3.4和mybatis plus的版本问题的解决

《springboot3.4和mybatisplus的版本问题的解决》本文主要介绍了springboot3.4和mybatisplus的版本问题的解决,主要由于SpringBoot3.4与MyBat... 报错1:spring-boot-starter/3.4.0/spring-boot-starter-

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服