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的操做符和方法时，将会很是有用。