可视化工具–D3–基础图表的绘制（line）

在信息可视化的研究与应用中，每一个复杂的图表和模块都是有若干个相对基础和简单的图表构成，这些图表包括散点图、扇形图、折线图、直方图等等，这里我介绍一下线图的绘制，本文里全部代码基础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佬们转转载，分个享啥的，良辰必有重谢。