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

相关文章

使用jenv工具管理多个JDK版本的方法步骤

《使用jenv工具管理多个JDK版本的方法步骤》jenv是一个开源的Java环境管理工具,旨在帮助开发者在同一台机器上轻松管理和切换多个Java版本,:本文主要介绍使用jenv工具管理多个JD... 目录一、jenv到底是干啥的?二、jenv的核心功能(一)管理多个Java版本(二)支持插件扩展(三)环境隔

MySQL版本问题导致项目无法启动问题的解决方案

《MySQL版本问题导致项目无法启动问题的解决方案》本文记录了一次因MySQL版本不一致导致项目启动失败的经历,详细解析了连接错误的原因,并提供了两种解决方案:调整连接字符串禁用SSL或统一MySQL... 目录本地项目启动报错报错原因:解决方案第一个:第二种:容器启动mysql的坑两种修改时区的方法:本地

conda安装GPU版pytorch默认却是cpu版本

《conda安装GPU版pytorch默认却是cpu版本》本文主要介绍了遇到Conda安装PyTorchGPU版本却默认安装CPU的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的... 目录一、问题描述二、网上解决方案罗列【此节为反面方案罗列!!!】三、发现的根本原因[独家]3.1 p

Redis指南及6.2.x版本安装过程

《Redis指南及6.2.x版本安装过程》Redis是完全开源免费的,遵守BSD协议,是一个高性能(NOSQL)的key-value数据库,Redis是一个开源的使用ANSIC语言编写、支持网络、... 目录概述Redis特点Redis应用场景缓存缓存分布式会话分布式锁社交网络最新列表Redis各版本介绍旧

IIS 7.0 及更高版本中的 FTP 状态代码

《IIS7.0及更高版本中的FTP状态代码》本文介绍IIS7.0中的FTP状态代码,方便大家在使用iis中发现ftp的问题... 简介尝试使用 FTP 访问运行 Internet Information Services (IIS) 7.0 或更高版本的服务器上的内容时,IIS 将返回指示响应状态的数字代

使用Python获取JS加载的数据的多种实现方法

《使用Python获取JS加载的数据的多种实现方法》在当今的互联网时代,网页数据的动态加载已经成为一种常见的技术手段,许多现代网站通过JavaScript(JS)动态加载内容,这使得传统的静态网页爬取... 目录引言一、动态 网页与js加载数据的原理二、python爬取JS加载数据的方法(一)分析网络请求1

Android NDK版本迭代与FFmpeg交叉编译完全指南

《AndroidNDK版本迭代与FFmpeg交叉编译完全指南》在Android开发中,使用NDK进行原生代码开发是一项常见需求,特别是当我们需要集成FFmpeg这样的多媒体处理库时,本文将深入分析A... 目录一、android NDK版本迭代分界线二、FFmpeg交叉编译关键注意事项三、完整编译脚本示例四

VSCode中配置node.js的实现示例

《VSCode中配置node.js的实现示例》本文主要介绍了VSCode中配置node.js的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一.node.js下载安装教程二.配置npm三.配置环境变量四.VSCode配置五.心得一.no

查看MySQL数据库版本的四种方法

《查看MySQL数据库版本的四种方法》查看MySQL数据库的版本信息可以通过多种方法实现,包括使用命令行工具、SQL查询语句和图形化管理工具等,以下是详细的步骤和示例代码,需要的朋友可以参考下... 目录方法一:使用命令行工具1. 使用 mysql 命令示例:方法二:使用 mysqladmin 命令示例:方

Java版本不兼容问题详细解决方案步骤

《Java版本不兼容问题详细解决方案步骤》:本文主要介绍Java版本不兼容问题解决的相关资料,详细分析了问题原因,并提供了解决方案,包括统一JDK版本、修改项目配置和清理旧版本残留等步骤,需要的朋... 目录错误原因分析解决方案步骤第一步:统一 JDK 版本第二步:修改项目配置第三步:清理旧版本残留兼容性对