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常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

使用JS/Jquery获得父窗口的几个方法(笔记)

<pre name="code" class="javascript">取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);如题: $(selector, window.top.document);//获得顶级窗口里面的元素 $(

js异步提交form表单的解决方案

1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如:URLDecoder.decode(param,"UTF-8")</strong></span>

js react 笔记 2

起因, 目的: 记录一些 js, react, css 1. 生成一个随机的 uuid // 需要先安装 crypto 模块const { randomUUID } = require('crypto');const uuid = randomUUID();console.log(uuid); // 输出类似 '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

学习记录:js算法(二十八):删除排序链表中的重复元素、删除排序链表中的重复元素II

文章目录 删除排序链表中的重复元素我的思路解法一:循环解法二:递归 网上思路 删除排序链表中的重复元素 II我的思路网上思路 总结 删除排序链表中的重复元素 给定一个已排序的链表的头 head , 删除所有重复的元素,使每个元素只出现一次 。返回 已排序的链表 。 图一 图二 示例 1:(图一)输入:head = [1,1,2]输出:[1,2]示例 2:(图

uuid.js 使用

相关代码 import { NIL } from "uuid";/** 验证UUID* 为空 则返回 false* @param uuid* @returns {boolean}*/export function MyUUIDValidate(uuid: any): boolean {if (typeof uuid === "string" && uuid !== NIL) { //uuid