本教程是一個簡單的入門教程，能夠幫助初學者快速掌握D3的基礎知識。
本節(jié)內(nèi)容介紹了添加元素、綁定數(shù)據(jù)、使用數(shù)據(jù)、矢量圖SVG、比例尺Scale和坐標軸Axis。綁定數(shù)據(jù)介紹了從tsv文件綁定數(shù)據(jù)，從json文件、csv文件綁定數(shù)據(jù)用法相同。SVG用來繪制簡單圖形，是重點又是基礎。Scale可以來控制縮放比例，Axis可以繪制坐標軸。
參考教程：D3 Tutorials - Scott Murray
1. 添加元素
d3.select("body").append("p").text("New paragraph!")
在html中添加了一個p標簽，p標簽text值為“New paragraph!”。
2. 綁定數(shù)據(jù)
2.1 Array
var dataset = [5, 10, 15, 20, 25];
d3.select("body")
.selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("New paragraph!");
d3.select("body")——在DOM中找到body節(jié)點。
.selctAll("p")——在上一步找到的body節(jié)點中選擇所有的p標簽節(jié)點。如果沒有，返回空，但是這個空代表將要存在的段落。
.data(dataset)——綁定數(shù)據(jù)到選擇的DOM元素上。
.enter()——enter()將創(chuàng)建一個占位符元素，用來綁定數(shù)據(jù)。
.append("p")——獲取enter()創(chuàng)建的占位符，將p元素插入到DOM中。
.text("New paragraph!")——為每個p元素插入文本值。
html中添加了5個p標簽，text值均為“New paragraph!”。
2.2 TSV
TSV是一種方便的表格數(shù)據(jù)格式。該表格可以從Microsoft Excel等表格程序?qū)С?，也可以在文本編輯器中手工編寫。每一行代表一個表行，其中每行的數(shù)據(jù)由制表符Tab分隔組成。第一行是標題行，并指定列名。例如，我們的數(shù)據(jù)文件data.tsv內(nèi)容如下：
name value
Locke 4
Reyes 8
Ford 15
Jarrah 16
Jone 23
Kwon 42
要在瀏覽器中使用此數(shù)據(jù)，需要從服務器下載文件，然后解析文件，將文件的文本轉換為可用的JavaScript對象。這件事情可以由函數(shù)d3.tsv實現(xiàn)。
下載是異步的。當調(diào)用d3.tsv時，文件在后臺下載然后返回數(shù)據(jù)。在下載完成后的某個時候，回調(diào)函數(shù)將使用新數(shù)據(jù)調(diào)用，如果下載失敗，則返回錯誤。
// 1. 這里的代碼首先運行，處于文件下載前。
d3.tsv("data.tsv", function(error, data) {
//3. 這里的代碼最后運行，此時文件下載完成。
});
// 2. 這里的代碼第二時間運行，文件正在下載中。
TSV文件的文本轉換為JavaScript對象是這個樣子：
var data = [
{name: "Locke", value: 4},
{name: "Reyes", value: 8},
{name: "Ford", value:15},
{name: "Jarrah", value: 16},
{name: "Jone", value: 23},
{name: "Kwon", value: 42}
]
使用d3.json、d3.csv能夠分別從json文件、csv文件綁定數(shù)據(jù)，用法相同。
3. 使用數(shù)據(jù)
var dataset = [5, 10, 15, 20, 25];
d3.select("body")
.selectAll("p")
.data(dataset)
.enter()
.append("p")
.text(function(d) { return d; });
創(chuàng)建了5個p標簽，text值分別為5，10，15，20，25。
4. 繪制div
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div.bar {
display: inline-block;
width: 20px;
height: 75px; /* We'll override this later */
background-color: teal;
margin-right: 2px;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript">
var dataset = []; //Initialize empty array
for (var i = 0; i < 25; i++) { //Loop 25 times
var newNumber = Math.random() * 30; //New random number (0-30)
dataset.push(newNumber); //Add new number to array
}
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
.style("height", function(d) {
var barHeight = d * 5;
return barHeight + "px";
});
</script>
</body>
<html>
5. SVG
在繪制任何東西之前，必須先創(chuàng)建一個SVG元素，并將該SVG元素作為繪制視覺效果的畫布。最好指定SVG的寬度和高度。
<svg width="500" height="50"></svg>
常用的svg標簽有rect、circle、ellipse、line、text、path。
5.1 rect
rect繪制一個矩形。使用x和y指定左上角的坐標，width和height分別指定矩形的寬度和高度。
<rect x="0" y="0" width="500" height="50" />
效果圖：
5.2 circle
circle繪制一個圓。使用cx和cy指定圓心的坐標，r指定半徑。
<circle cx="250" cy="25" r="25" />
效果圖：
5.3 ellipse
ellipse繪制一個橢圓。與圓類似，使用cx和cy指定中心的坐標，但是對于每個軸需要單獨的半徑值。rx為橫軸方向的半徑，ry為縱軸方向的半徑。
<ellipse cx="250" cy="25" rx="100" ry="25" />
效果圖：
5.4 line
line繪制一條線條。使用x1和y1來指定線一端的坐標，x2和y2指定另一端的坐標。必須指定線條的顏色使線條可見。
<line x1="0" y1="0" x2="500" y2="50" stroke="black" />
效果圖：
5.5 text
text呈現(xiàn)文字。使用x指定左邊緣的位置，y指定基線的垂直位置。
<text x="250" y="25">Hello World</text>
效果圖：
text繼承父元素CSS指定的字體樣式。我們也可以覆蓋格式如下：
<text x="250" y="25" font-family="sans-serif" font-size="25" fill="steelblue">Hello World</text>
效果圖：
5.6 path
path用于繪制更為復雜的內(nèi)容（如地理圖的國家輪廓等）?，F(xiàn)在，我們先掌握簡單的形狀。
6. Scale
D3的scale函數(shù)可以定義一個縮放比例。調(diào)用scale函數(shù)時，傳入一個數(shù)據(jù)值，可以返回一個縮放后的輸出值。
創(chuàng)建一個Scale:
//d3.js 3.x版本
var scale = d3.scale.linear();
//d3.js 4.x版本
var scale = d3.scaleLinear();
使用domain函數(shù)可以設置數(shù)據(jù)的輸入域：
scale.domain([100, 500]);
使用range函數(shù)可以設置數(shù)據(jù)的輸出域：
scale.range([10, 350]);
可以將上述步驟鏈接在一行代碼中：
var scale = d3.scale.linear()
.domain([100, 500])
.range([10, 350]);
scale(100); //Returns 10
scale(300); //Returns 180
scale(500); //Returns 350
7. Axis
axis函數(shù)用來創(chuàng)建坐標軸。
創(chuàng)建一個Axis:
var xAxis = d3.svg.axis();
每個軸需告知操作的尺度規(guī)模大小,即scale：
xAxis.scale(xScale);
我們還需要指定標簽刻度值在軸上顯示的位置。默認值為bottom，表示標簽刻度值顯示在軸線的下方。
xAxis.orient("bottom");
可以使用ticks函數(shù)告訴坐標軸粗略的設置幾個刻度：
xAxis.ticks(5);
我們也可以把代碼鏈接起來：
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);
最后，我們把生成的軸插入到SVG中。
svg.append("g")
.call(xAxis);
更多內(nèi)容：Github個人博客
備注：本文發(fā)表于 https://cnyangkui.github.io/2017/10/16/d3basic.html
