本教程是一個(gè)簡(jiǎn)單的入門(mén)教程，能夠幫助初學(xué)者快速掌握D3的基礎(chǔ)知識(shí)肥败。
本節(jié)內(nèi)容介紹了添加元素、綁定數(shù)據(jù)愕提、使用數(shù)據(jù)馒稍、矢量圖SVG、比例尺Scale和坐標(biāo)軸Axis浅侨。綁定數(shù)據(jù)介紹了從tsv文件綁定數(shù)據(jù)纽谒，從json文件、csv文件綁定數(shù)據(jù)用法相同如输。SVG用來(lái)繪制簡(jiǎn)單圖形鼓黔，是重點(diǎn)又是基礎(chǔ)央勒。Scale可以來(lái)控制縮放比例，Axis可以繪制坐標(biāo)軸澳化。
參考教程：D3 Tutorials - Scott Murray
1. 添加元素
d3.select("body").append("p").text("New paragraph!")
在html中添加了一個(gè)p標(biāo)簽崔步，p標(biāo)簽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é)點(diǎn)缎谷。
.selctAll("p")——在上一步找到的body節(jié)點(diǎn)中選擇所有的p標(biāo)簽節(jié)點(diǎn)井濒。如果沒(méi)有，返回空慎陵，但是這個(gè)空代表將要存在的段落眼虱。
.data(dataset)——綁定數(shù)據(jù)到選擇的DOM元素上。
.enter()——enter()將創(chuàng)建一個(gè)占位符元素席纽，用來(lái)綁定數(shù)據(jù)捏悬。
.append("p")——獲取enter()創(chuàng)建的占位符，將p元素插入到DOM中润梯。
.text("New paragraph!")——為每個(gè)p元素插入文本值过牙。
html中添加了5個(gè)p標(biāo)簽，text值均為“New paragraph!”纺铭。
2.2 TSV
TSV是一種方便的表格數(shù)據(jù)格式寇钉。該表格可以從Microsoft Excel等表格程序?qū)С觯部梢栽谖谋揪庉嬈髦惺止ぞ帉?xiě)舶赔。每一行代表一個(gè)表行扫倡，其中每行的數(shù)據(jù)由制表符Tab分隔組成。第一行是標(biāo)題行竟纳，并指定列名撵溃。例如，我們的數(shù)據(jù)文件data.tsv內(nèi)容如下：
name value
Locke 4
Reyes 8
Ford 15
Jarrah 16
Jone 23
Kwon 42
要在瀏覽器中使用此數(shù)據(jù)锥累，需要從服務(wù)器下載文件缘挑，然后解析文件，將文件的文本轉(zhuǎn)換為可用的JavaScript對(duì)象桶略。這件事情可以由函數(shù)d3.tsv實(shí)現(xiàn)语淘。
下載是異步的。當(dāng)調(diào)用d3.tsv時(shí)际歼，文件在后臺(tái)下載然后返回?cái)?shù)據(jù)惶翻。在下載完成后的某個(gè)時(shí)候，回調(diào)函數(shù)將使用新數(shù)據(jù)調(diào)用蹬挺，如果下載失敗维贺，則返回錯(cuò)誤。
// 1. 這里的代碼首先運(yùn)行巴帮，處于文件下載前溯泣。
d3.tsv("data.tsv", function(error, data) {
//3. 這里的代碼最后運(yùn)行虐秋，此時(shí)文件下載完成。
});
// 2. 這里的代碼第二時(shí)間運(yùn)行垃沦，文件正在下載中客给。
TSV文件的文本轉(zhuǎn)換為JavaScript對(duì)象是這個(gè)樣子：
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個(gè)p標(biāo)簽池充，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)建一個(gè)SVG元素厘灼，并將該SVG元素作為繪制視覺(jué)效果的畫(huà)布。最好指定SVG的寬度和高度咽瓷。
<svg width="500" height="50"></svg>
常用的svg標(biāo)簽有rect设凹、circle、ellipse茅姜、line闪朱、text、path钻洒。
5.1 rect
rect繪制一個(gè)矩形监透。使用x和y指定左上角的坐標(biāo)，width和height分別指定矩形的寬度和高度航唆。
<rect x="0" y="0" width="500" height="50" />
效果圖：
5.2 circle
circle繪制一個(gè)圓。使用cx和cy指定圓心的坐標(biāo)院刁，r指定半徑糯钙。
<circle cx="250" cy="25" r="25" />
效果圖：
5.3 ellipse
ellipse繪制一個(gè)橢圓。與圓類似退腥，使用cx和cy指定中心的坐標(biāo)任岸，但是對(duì)于每個(gè)軸需要單獨(dú)的半徑值。rx為橫軸方向的半徑狡刘，ry為縱軸方向的半徑享潜。
<ellipse cx="250" cy="25" rx="100" ry="25" />
效果圖：
5.4 line
line繪制一條線條。使用x1和y1來(lái)指定線一端的坐標(biāo)嗅蔬，x2和y2指定另一端的坐標(biāo)剑按。必須指定線條的顏色使線條可見(jiàn)疾就。
<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用于繪制更為復(fù)雜的內(nèi)容（如地理圖的國(guó)家輪廓等）〔赂遥現(xiàn)在姑荷，我們先掌握簡(jiǎn)單的形狀。
6. Scale
D3的scale函數(shù)可以定義一個(gè)縮放比例缩擂。調(diào)用scale函數(shù)時(shí)鼠冕，傳入一個(gè)數(shù)據(jù)值，可以返回一個(gè)縮放后的輸出值胯盯。
創(chuàng)建一個(gè)Scale:
//d3.js 3.x版本
var scale = d3.scale.linear();
//d3.js 4.x版本
var scale = d3.scaleLinear();
使用domain函數(shù)可以設(shè)置數(shù)據(jù)的輸入域：
scale.domain([100, 500]);
使用range函數(shù)可以設(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ù)用來(lái)創(chuàng)建坐標(biāo)軸懈费。
創(chuàng)建一個(gè)Axis:
var xAxis = d3.svg.axis();
每個(gè)軸需告知操作的尺度規(guī)模大小,即scale：
xAxis.scale(xScale);
我們還需要指定標(biāo)簽刻度值在軸上顯示的位置。默認(rèn)值為bottom陨闹，表示標(biāo)簽刻度值顯示在軸線的下方楞捂。
xAxis.orient("bottom");
可以使用ticks函數(shù)告訴坐標(biāo)軸粗略的設(shè)置幾個(gè)刻度：
xAxis.ticks(5);
我們也可以把代碼鏈接起來(lái)：
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);
最后，我們把生成的軸插入到SVG中趋厉。
svg.append("g")
.call(xAxis);
更多內(nèi)容：Github個(gè)人博客
備注：本文發(fā)表于 https://cnyangkui.github.io/2017/10/16/d3basic.html
