可视化工具–D3–基础图表的绘制(line)
来源:互联网 发布:互联网大数据论文题目 编辑:程序博客网 时间:2024/06/06 00:50
在信息可视化的研究与应用中,每一个复杂的图表和模块都是有若干个相对基础和简单的图表构成,这些图表包括散点图、扇形图、折线图、直方图等等,这里我介绍一下线图的绘制,本文里全部代码基础d3js v4版本。
虽然没人看也没人关注,还是分享一下我在知乎里写的小短文
https://zhuanlan.zhihu.com/p/31316880
还有分享一下我师兄的技术交流群
R语言&大数据分析 456726635
以及我的qiuqiu
503138114
同时寻求跨学科学术研究合作者,如需可视化和可视分析支持,且有发表英文论文需求的大佬们戳我,我目前的研究方向集中在城市交通和城市大型商业区的可视分析中,同时具备一定的统计学能力以及机器学习知识。
下面是正文
首先折线图的绘制:
v4 版本中提供了两种线条生成器,一种是line,另外一种是radialLine。不过经常使用的是第一种,而radialLine我竟然在三年的可视化领域的科研和实践中没有用过,只是自己弄着玩的时候用过。
通常情况下line是和path同时出现的,而线图的绘制实际上是把数据根据定义的line转换成位置信息然后使用path添加到画布的一个过程。
一般情况下会首先定义一个line(自定义命名):
let line=d3.line() .x(function(d) { return xScale(d.date); }) .y(function(d) { return yScale(d.value); });
其中经常配套使用的还有比例尺
http://blog.csdn.net/u014711869/article/details/72876245
.x()和.y()是用来设置并得到根据输入数据得到的点的位置信息。
如果是简单的线形图的line设置这已经足够了,但是为了一定程度上解决数据错误情况以及更好的展示数据,d3还提供了其余几个方法。
line.defiend(function(d){ return xxxxxx})
当某数据点无法解析为坐标时,通过defiend来定义此时将要进行的操作,不过通常个人绘制时很少考虑,只有在数据质量不高或者无法进行预处理时使用。
line.curve()//这是用来设置折线的样式
默认值为curveLinear即line.curve(d3.curveLinear),显示效果如下
除此之外常用的还有curveMonotoneX(curveMonotoneY),curveBasis,curveStep(curveStepBefore,curveStepAfter)三种–括号里的是一系列类似的样式,在可视化领域有一个研究方向叫做边绑定,研究目的是为了让复杂且杂乱的线形图变得有序且容易理解,d3也提供了几种边绑定(捆图)的方法,因为在绘制折线图时几乎不使用,在这里不介绍,以后有机会会详细介绍边绑定的方法。
这是一个边绑定的例子,图片来自网络,水印是csdn自己加上去的,表怨我。
下面是三种常用样式的例图
有兴趣的话可以自己去尝试,d3还提供了闭合曲线的样式,不过一般情况下线形图都是不闭合的就不介绍了。
定义好line之后就是输入数据以及输出图形了,一般情况下使用如下方法
svg.append("path") .attr("d", line(data));
或者
svg.datum(data) .append("path") .attr("d", line);
radialLine我没有用过,讲真如果不是前些日子读源码和api发现了这么个东西我还真不知道,这是个很有趣但是感觉不太实用的接口。
raidalLine和line十分相似,只是没有了.x()和.y()而是用.angle()和.radius()来代替,同时返回的也不是位置坐标,而是角度和半径。因为raidal是以(0,0)为中心绘制的,因此要进行偏移,我使用上图的数据和raidalLine绘制效果如下
看上去相当玄学,只能说数据集不合适。
虽然没人看,但是还是请各位dei佬们转转载,分个享啥的,良辰必有重谢。
- 可视化工具–D3–基础图表的绘制(line)
- 可视化工具–D3–比例尺的使用(quantitative)
- 可视化工具–D3–比例尺的使用(ordinal)
- 可视化工具–D3–颜色的使用
- 可视化工具–D3–坐标轴的使用
- 可视化图表工具的选择
- d3.js—— 绘制二维数组的动态图表
- 强大的图表绘制工具
- 【D3.js数据可视化实战】--(3)桑基图(sankey)的绘制
- 【D3.js数据可视化实战】--(1)绘制网格线
- 【D3.js数据可视化系列教程】--(八)使用D3绘制SVG
- 图表可视化工具
- 数据可视化(7)--D3基础
- 可视化图表教程:业务数据地图的绘制
- 大数据时代的图表可视化利器——highcharts,D3和百度的echarts
- 大数据时代的图表可视化利器——highcharts,D3和百度的echarts
- 【D3.js数据可视化系列教程】(十九)--交互图表之鼠标悬停
- 【D3.js数据可视化系列教程】(二十)--交互图表之条形图排序
- AndroidTagView 云标签
- 套打常用脚本
- freemaker对于页面的内容的展示,对特殊字符的转义
- 文件时间对于CP命令的影响
- vtk3———System Overview
- 可视化工具–D3–基础图表的绘制(line)
- java中的二维数组
- tensorflow变量管理
- 多线程使用集合
- muscial.ly-实习小结2
- []==false为什么为true分析,扩展null==0是什么结果
- HDU-2665 Kth number (主席树 不带修改区间第k大)
- 关于activiti的springMVC + myBatis项目pom.xml文件的简单配置
- java反射机制