在資訊可視化的研究與應用中，每一個複雜的圖表和子產品都是有若幹個相對基礎和簡單的圖表構成，這些圖表包括散點圖、扇形圖、折線圖、直方圖等等，這裡我介紹一下線圖的繪制，本文裡全部代碼基礎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來定義此時将要進行的操作，不過通常個人繪制時很少考慮，隻有在資料品質不高或者無法進行預處理時使用。
預設值為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佬們轉轉載，分個享啥的，良辰必有重謝。