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的操作符和方法時，將會非常有用。