![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
可视化技术 - D3实现
基于D3描述的可视化制作
Xiao____Q
退役ACMer
展开
-
D3 - 动态图绘制(详解)(D3.v5)
文章目录1. 再谈“数据绑定”1.1 选择元素1.2 添加、插入和删除1.3 数据绑定2. 过渡效果2.1 过渡启动2.2 过渡属性3. 定时器4. 简单动画制作4.1 动态绘制circle4.2 动态绘制rect1. 再谈“数据绑定”1.1 选择元素D3中,选择元素的函数有两个select和selectAll,两种方法都很常用,select返回匹配选择器的第一个元素,而selectAll返回匹配选择器的所有元素。选择所需元素的方法:d3.select("body"); //选择body元素d3原创 2020-06-02 18:00:34 · 2345 阅读 · 0 评论 -
D3 - 动态条形图制作
数据来自csv文件。绘制效果图:数据集解释:数据信息为美国六个主要城市每个月的光照时间变化。代码详细解释:let Color = new Array(); // 随机生成每个城市的代表颜色 for (let i = 0; i < 6; ++i) { Color[i] = 'rgba(' + Math.random() * 255 + ',' + M...原创 2020-05-07 16:03:59 · 1488 阅读 · 2 评论 -
D3 -折线统计图
数据来自csv文件。绘制效果图:图片一共由几个部分构成:横纵两个坐标轴,横轴为月份编号,纵轴是光照时间。中间主体部分是折线,由svg的Path绘制,其中数据坐标点为svg的circle元素。右上部分是图例,代表不同颜色代表的城市信息,城市纬度。颜色深浅程度代表纬度的高低。 // 构造比例尺 xScale = d3.scaleLinear() .dom...原创 2020-03-30 15:42:20 · 504 阅读 · 2 评论 -
D3 - 箱型图
箱型图(Boxplot)箱型图概念解释:https://blog.csdn.net/aijiudu/article/details/89387328箱型图,是一种用于显示一组数据分散情况资料的统计图,即每一个box表示的是一组数据。通常采用五个数值来概括这一组数据,即:中位数Q2Q2Q2,下四分位数Q1Q1Q1,上四分位数Q3Q3Q3,上限和下限。其中,Q2={a(n+1)/2,odda...原创 2020-03-26 11:17:48 · 953 阅读 · 4 评论 -
D3 - 平行坐标系
平行坐标系的介绍:http://www.zhaiqianfeng.com/2016/09/parallel-coordinates.html平行坐标系是用来解决同时展示多个坐标轴的数据集的可视化问题。平行坐标系是被广泛使用的可视化技术之一,是分析多维数据的强有力的工具。这里我在做的时候采用了最简单的方法制作的,即创建多个等长的比例尺,然后等距竖向排列在svg画布中,再用一条一条的折线将其连接起...原创 2020-03-17 20:59:41 · 1411 阅读 · 2 评论 -
D3 - 绘制散点图
D3绘制散点图效果图数据来自:https://www.worldbank.org/完整代码(不含Initialize初始化数据的函数):<script src="https://d3js.org/d3.v5.js"></script><script> let w = window.innerWidth || document.documen...原创 2020-03-17 16:30:15 · 557 阅读 · 0 评论 -
D3 - 绘制条形统计图
D3绘制简单条形统计图效果图:(图中箭头出表示鼠标位置,交互显示位置处的矩形)完整代码:<body><script src="https://d3js.org/d3.v5.js"></script><script> let w = window.innerWidth || document.documentElement.cl...原创 2020-03-08 21:13:39 · 787 阅读 · 0 评论 -
D3 - 基础篇
D3 - API手册:https://github.com/d3/d3/wiki/API–%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8CD3 - v5学习:https://blog.csdn.net/qq_34414916/category_7608878.htmlD3 全称:Data-Driven-Documents前置:HTML - 超文本标记语言,用于设计网...原创 2020-03-07 20:50:12 · 257 阅读 · 0 评论