d3.js學習筆記（五）——將數據結構化爲D3.js可處理的

目標

在這一章，你將會理解如何對數據進行結構化，來更好的使用D3.js。 咱們將會回顧咱們以前已經學習的，學習D3.js如何使用選集（selections），JavaScript對象基礎，以及如何最優的結構化數據。

到目前咱們已經學到了哪些？

到目前，咱們使用D3.js完成的例子都包含一個定義在最上方的數據集：

var spaceCircles = [30,70,110];

這個spaceCircles變量是一個JavaScript數組。數組就是一個變量的枚舉列表。這也就意味着，每個元素都附有一個索引值與其對應，且索引值是從0開始。

對於spaceCircles，咱們在JavaScript控制檯輸入以下代碼，將會獲得：

var spaceCircles = [30,70,110];

spaceCircles[0]
// 返回數字 30

spaceCircles[1]
//返回數字 70

spaceCircles[2]
//返回數字 110

注意：「//」符號在JavaScript中表示註釋

JavaScript的數組（array）能夠存聽任何類型的你想放進去的信息。這些數組的內容能夠是數值、對象、字符串、數組、HTML元素、DOM元素等等。

D3.js選集就是數組

D3.js的選集都是JavaScript數組。

經過JavaScript控制檯，咱們使用JavaScript的concole.log獲得一個簡單的選集：

console.log(d3.select("body"));

這樣咱們就獲得了包含一個元素-HTML的「body」元素-的數組：

結果以下：

這也就是說，無論數組中是什麼數據，關鍵是確保.data()操做符接收到了數據數組。

加載外部數據源

D3.js具備加載下列類型外部數據源的功能：

• XMLHttpRequest
• 文本文件（txt file）
• JSON文件
• HTML文件
• XML文件
• CSV（逗號分隔值，comma-separated values）文件
• TSV（製表符分隔值，tab-separated values）文件

這些數據源返回的數據都能被d3.js處理。惟一須要注意的就是：確保你由這些數據建立一個數組。

到目前爲止，咱們還都是手動輸入數據，不過不會這樣作過久啦~

後面的章節咱們將會學習啓動服務器，而後加載外部數據源。

JSON

JSON，全稱是：JavaScript Object Notion。This is a JavaScript data structure where the indices are named.（不知道該如何翻譯index）。

JSON是name/value（名稱/值）對的集合。在JSON中，名稱（name）必須由雙引號註明：

var secretAgent = {
   "name":"James Bond",
   "drink":"dry martini-shaken,not stirred",
};

咱們能夠從上面定義的變量中獲得指定的信息:

var secretAgent = {
   "name":"James Bond",
   "drink":"dry martini-shaken,not stirred",
   "number":"007"
};

secretAgent.number;
//返回的是"007"

這也就使得咱們引用代碼或者數據變得更加方便。

JSON對象數組
正如咱們在本文的前面就提到的——數組可以存儲任何類型的信息，甚至是JSON。
回到上一章中的那個圓形例子，咱們能夠把全部可視化這些圓形所必需的數據寫到一個圓形對象數組中。

var jsonCircles = [
{
"x_axis":30,
"y_axis":30,
"radius":20,
"color":"green"
},{
"x_xis":70,
"y_xis":70,
"radius":20,
"color":"purple"
},{
"x_axis":110,
"y_axis":100,
"radius":20,
"color":"red"
}];

　　經過console.log運行咱們的變量，咱們能夠看到jsonCircles是一個具備三個對象的數組：

能夠向以下這樣從jsonCircles中取出數據：

var jsonCircles = [
{"x_axis":30,"y_axis":30,"radius":20,"color":"green"},
{"x_axis":70,"y_axis":70,"radius":20,"color":"purple"},
{"x_axis":110,"y_axis":100,"radius":20,"color":"red"}];

jsonCircles[0].color;
//返回 「green」

jsonCircles[1].y_axis;
//返回 70

jsonCircles[2].radius;
//返回 20

　　這一特色在後面的章節中使用d3.js的操做符和方法時，將會很是有用。