Bar Chart:?http://bl.ocks.org/mbostock/3885304
這是一個畫柱狀圖的基本形式。

Axis是數軸；
tickets是數軸上的標尺。tickets第二個參數% 能夠使[0, 1]的數以百分比顯示；
rangeRoundBands 在[0, width] 上按區間劃分。正好適合柱狀圖，rangePoints 在[0, width] 上按點位劃分；
transform 是相對于父節點變換坐標的數目。
function type 先于load tsv文件運行。程序異步進行。

Bar Chart III:?http://bl.ocks.org/mbostock/7441121
tutorial 給出的畫柱狀圖的終于最簡形式。

Tick Format:?http://bl.ocks.org/mbostock/9764126
數軸tickets方法的演示，發現tickets第一個參數（在數軸上打點）傳入后，在圖形中數軸上點(line)的個數只和傳入參數有相關關系。

Log Axis:?http://bl.ocks.org/mbostock/5537697
Log形式的數軸。tickSize第一個參數表示在數軸上打點line的長度。

ggplot2-Style Axis:?http://bl.ocks.org/mbostock/4349486
特殊的數軸，展示數軸上點line 單雙數有不同的css style。

Line Chart:?http://bl.ocks.org/mbostock/3883245
橫軸日期，縱軸價格，畫一條曲線。
d3.time.format, d3.time.scale 兩個時間有關的對象。

最重要的是d3.svg.line 函數，能夠在path上增加d 屬性，畫一條曲線。

Multi-Series Line Chart:?http://bl.ocks.org/mbostock/3884955
橫軸日期，縱軸溫度，畫不同城市的溫度對照曲線。
d3.scale.category10 區分不同顏色。
interpolate 給畫的曲線加點修飾；
比較tricky的地方是對數據的又一次處理cities。好方便批量的畫不同曲線。


問題：
D3 的演示樣例給出的都是從tsv讀數據。而現實中我們通經常使用ajax讀取后臺數據：http://stackoverflow.com/questions/22784164/what-is-the-best-way-to-update-d3-charts-using-ajax
如何用線條、柱狀圖等多種方式表示Multi-Series Chart:?http://www.delimited.io/blog/2014/3/3/creating-multi-series-charts-in-d3-lines-bars-area-and-streamgraphs

資源：
Tutorial：https://github.com/mbostock/d3/wiki/Tutorials
供查找的API：https://github.com/mbostock/d3/wiki/API-Reference

總結

以上是生活随笔為你收集整理的怎样一步步用D3画多曲线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。