D3.js 二维图表系列
文章平均质量分 92
运用D3.js绘制常见的图表,实现可视化第一步!!!
PAT-python-zjw
人生苦短,我用Python
展开
-
svg常用元素和属性
1. 介绍SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其可以直接被插入到网页 DOM 中,甚至作为CSS背景属性等,且无论放大多少倍,图像都不会失真。D3.js 正是操作各种svg 元素,将他们拼接成一幅幅精美的图件,因此了解常用的svg元素和属性是学习 D3.js 的必要条件。2.常用的svg标签<svg>...原创 2020-05-06 17:40:39 · 8712 阅读 · 2 评论 -
D3 二维图表的绘制系列(三十三)可缩放的矩形树图
上一篇: 可缩放的封闭图代码结构和初始化画布的Chart对象介绍,请先看 这里本图完整的源码地址: 这里1 图表效果2 数据{ "name": "grandfather", "children": [ { "name": "father", "children": [ { ...原创 2020-05-06 17:26:59 · 3541 阅读 · 1 评论 -
D3 二维图表的绘制系列(三十二)可缩放的封闭图
上一篇: 热力地图代码结构和初始化画布的Chart对象介绍,请先看 这里本图完整的源码地址: 这里1 图表效果2 数据这里用的是和普通封闭图一样的数据{ "name": "grandfather", "children": [ { "name": "father", "children": [ ...原创 2020-05-06 15:59:35 · 2405 阅读 · 0 评论 -
D3 二维图表的绘制系列(一)介绍
1 介绍D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库. D3 可以借助 SVG, Canvas 以及HTML 将你的数据生动的展现出来. D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术,让你可以借助于现代浏览器的强大功能自由的对数据进行可视化学习了d3一个多月,通过绘制一些简单的二维图表,总算入门了d3。强烈推荐《D3数据可视化实战...原创 2020-02-20 18:05:42 · 60918 阅读 · 6 评论 -
D3 二维图表的绘制系列(二)基础柱状图
代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/article/details/98182540本图完整的源码地址: https://github.com/zjw666/D3_demo/tree/master/src/barChart/basicBarChart1 图表效果2 数据date,moneyMon,120T...原创 2020-02-20 18:06:13 · 3380 阅读 · 0 评论 -
D3 二维图表的绘制系列(三)多列柱状图
上一篇: 基础柱状图 https://blog.csdn.net/zjw_python/article/details/98201470下一篇: 堆叠柱状图 https://blog.csdn.net/zjw_python/article/details/98201470代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/arti...原创 2020-02-20 18:06:31 · 5526 阅读 · 4 评论 -
D3 二维图表的绘制系列(四)堆叠柱状图
上一篇: 多列柱状图 https://blog.csdn.net/zjw_python/article/details/98205614下一篇: 横向柱状图 https://blog.csdn.net/zjw_python/article/details/98201470代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/arti...原创 2020-02-20 18:06:44 · 5084 阅读 · 5 评论 -
D3 二维图表的绘制系列(五)横向柱状图
上一篇: 堆叠柱状图 https://blog.csdn.net/zjw_python/article/details/98207916下一篇: 基础折线图 https://blog.csdn.net/zjw_python/article/details/98201470代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/arti...原创 2020-02-20 18:07:13 · 3076 阅读 · 0 评论 -
D3 二维图表的绘制系列(六)基础折线图
上一篇: 横向柱状图 https://blog.csdn.net/zjw_python/article/details/98209333下一篇: 堆叠面积图 https://blog.csdn.net/zjw_python/article/details/98201470代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/arti...原创 2020-02-20 18:07:22 · 2644 阅读 · 0 评论 -
D3 二维图表的绘制系列(七)堆叠面积图
上一篇: 基础折线图 https://blog.csdn.net/zjw_python/article/details/98210977下一篇: 曲线图 https://blog.csdn.net/zjw_python/article/details/98201470代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/articl...原创 2020-02-20 18:07:30 · 5832 阅读 · 0 评论 -
D3 二维图表的绘制系列(八)曲线图
上一篇: 堆叠面积图 https://blog.csdn.net/zjw_python/article/details/98214359下一篇: 基础饼图 https://blog.csdn.net/zjw_python/article/details/98201470代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/artic...原创 2020-02-20 18:07:38 · 2998 阅读 · 0 评论 -
D3 二维图表的绘制系列(九)基础饼图
上一篇: 曲线图 https://blog.csdn.net/zjw_python/article/details/98478578下一篇: 环形饼图 https://blog.csdn.net/zjw_python/article/details/98201470代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/article...原创 2020-02-20 18:07:45 · 2467 阅读 · 0 评论 -
D3 二维图表的绘制系列(十)环状饼图
上一篇: 基础饼图 https://blog.csdn.net/zjw_python/article/details/98214359下一篇: 南丁格尔图 https://blog.csdn.net/zjw_python/article/details/98201470代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/artic...原创 2020-02-20 18:07:52 · 3213 阅读 · 0 评论 -
D3 二维图表的绘制系列(十二)基础散点图
上一篇: 南丁格尔图 https://blog.csdn.net/zjw_python/article/details/98479641下一篇: 多符号散点图 https://blog.csdn.net/zjw_python/article/details/98201470代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/art...原创 2020-02-20 18:07:58 · 2453 阅读 · 0 评论 -
D3 二维图表的绘制系列(十三)多符号散点图
上一篇: 基础散点图 https://blog.csdn.net/zjw_python/article/details/98480632下一篇: 气泡图 https://blog.csdn.net/zjw_python/article/details/98201470代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/articl...原创 2020-02-20 18:08:11 · 3324 阅读 · 1 评论 -
D3 二维图表的绘制系列(十四)气泡图
上一篇: 多符号散点图 https://blog.csdn.net/zjw_python/article/details/98480632下一篇: 雷达图 https://blog.csdn.net/zjw_python/article/details/98201470代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/artic...原创 2020-02-20 18:08:28 · 3517 阅读 · 0 评论 -
D3 二维图表的绘制系列(十五)雷达图
上一篇: 气泡图 https://blog.csdn.net/zjw_python/article/details/98480632下一篇: 矩形树状图 https://blog.csdn.net/zjw_python/article/details/98201470代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/articl...原创 2020-02-20 18:08:35 · 5046 阅读 · 0 评论 -
D3 二维图表的绘制系列(十六)矩形树状图
上一篇: 雷达图 https://blog.csdn.net/zjw_python/article/details/98480632下一篇: 树图 https://blog.csdn.net/zjw_python/article/details/98201470代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/article/d...原创 2020-02-20 18:08:53 · 5749 阅读 · 3 评论 -
D3 二维图表的绘制系列(十一)南丁格尔图
上一篇: 环状饼图 https://blog.csdn.net/zjw_python/article/details/98480632下一篇: 基础散点图 https://blog.csdn.net/zjw_python/article/details/98201470代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/artic...原创 2020-02-20 18:08:21 · 4106 阅读 · 0 评论 -
D3 二维图表的绘制系列(十七)树图
上一篇: 矩形树图 https://blog.csdn.net/zjw_python/article/details/98480632下一篇: 漏斗图 https://blog.csdn.net/zjw_python/article/details/98201470代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/article...原创 2020-02-20 18:09:01 · 3658 阅读 · 0 评论 -
D3 二维图表的绘制系列(十八)漏斗图
上一篇: 树图 https://blog.csdn.net/zjw_python/article/details/98492510下一篇: 封闭图 https://blog.csdn.net/zjw_python/article/details/98201470代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/article/d...原创 2020-02-20 18:09:09 · 4455 阅读 · 0 评论 -
D3 二维图表的绘制系列(十九)封闭图
上一篇: 漏斗图 https://blog.csdn.net/zjw_python/article/details/98497967下一篇: 河流图 https://blog.csdn.net/zjw_python/article/details/98201470代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/article/...原创 2020-02-20 18:09:16 · 2085 阅读 · 0 评论 -
D3 二维图表的绘制系列(二十)河流图
上一篇: 封闭图 https://blog.csdn.net/zjw_python/article/details/98492510下一篇: 仪表盘图 https://blog.csdn.net/zjw_python/article/details/98201470代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/article...原创 2020-02-20 18:09:30 · 5584 阅读 · 0 评论 -
D3 二维图表的绘制系列(二十一)仪表盘图
上一篇: 河流图 https://blog.csdn.net/zjw_python/article/details/98492510下一篇: 桑基图 https://blog.csdn.net/zjw_python/article/details/98201470代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/article/...原创 2020-02-20 18:09:36 · 2704 阅读 · 0 评论 -
D3 二维图表的绘制系列(二十二)桑基图sankey
上一篇: 仪表盘图 https://blog.csdn.net/zjw_python/article/details/98492510下一篇: 旭日图 https://blog.csdn.net/zjw_python/article/details/98201470代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/article...原创 2020-02-20 18:10:11 · 5793 阅读 · 3 评论 -
D3 二维图表的绘制系列(二十三)旭日图
上一篇: 桑基图 https://blog.csdn.net/zjw_python/article/details/98492510下一篇: 力导向图 https://blog.csdn.net/zjw_python/article/details/98201470代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/article...原创 2020-02-20 18:09:44 · 3428 阅读 · 5 评论 -
D3 二维图表的绘制系列(二十四)力导向图
上一篇: 旭日图 https://blog.csdn.net/zjw_python/article/details/98613674代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/article/details/98182540本图完整的源码地址: https://github.com/zjw666/D3_demo/tree/...原创 2020-02-20 18:09:51 · 2482 阅读 · 0 评论 -
D3 二维图表的绘制系列(二十六)盒须图
上一篇: 中国地图 https://blog.csdn.net/zjw_python/article/details/98847312代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/article/details/98182540本图完整的源码地址: https://github.com/zjw666/D3_demo/tree...原创 2020-02-20 18:10:24 · 2823 阅读 · 0 评论 -
D3 二维图表的绘制系列(二十七)日历热力图
上一篇: 盒须图 https://blog.csdn.net/zjw_python/article/details/99581418代码结构和初始化画布的Chart对象介绍,请先看 https://blog.csdn.net/zjw_python/article/details/98182540本图完整的源码地址: https://github.com/zjw666/D3_demo/tree/...原创 2020-02-20 18:10:31 · 5546 阅读 · 0 评论 -
D3 二维图表的绘制系列(二十八)关系图-弦图 chord
上一篇: 日历热力图代码结构和初始化画布的Chart对象介绍,请先看 这里本图完整的源码地址: 这里1 图表效果2 数据{ "citys": ["北京","上海","广州","深圳","香港"], "population": [ [1000,3015,4567,1234,3714], [3214,2000,2060,124,3234], [8761,65...原创 2020-02-20 18:10:37 · 5415 阅读 · 0 评论 -
D3 二维图表的绘制系列(二十九)径向树图
上一篇: 关系图-弦图代码结构和初始化画布的Chart对象介绍,请先看 这里本图完整的源码地址: 这里1 图表效果2 数据{ "name": "letter", "children": [ { "name": "a", "children": [ { ...原创 2020-02-20 18:10:43 · 5775 阅读 · 0 评论 -
D3 二维图表的绘制系列(三十)平行坐标系折线图
上一篇: 径向树图代码结构和初始化画布的Chart对象介绍,请先看 这里本图完整的源码地址: 这里1 图表效果2 数据name,math,chinese,english,chemistry小明,30,60,57,49小红,50,95,65,65小张,66,70,40,883 关键代码导入数据d3.csv('./data.csv', function(d){ ret...原创 2020-02-20 18:10:50 · 5763 阅读 · 0 评论 -
D3 二维图表的绘制系列(三十一)热力地图(heatMap.js)
上一篇: 平行坐标系折线图代码结构和初始化画布的Chart对象介绍,请先看 这里本图完整的源码地址: 这里1 图表效果2 数据本文源码中提供了中国地图的GeoJson数据, 点击这里下载,如果想获取其他地区的数据,可参考这篇文章3 关键代码导入GeoJson格式的地图数据d3.json('./china.json').then(function(data){....一些简单...原创 2020-02-20 18:10:56 · 6358 阅读 · 0 评论