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的操作符和方法时，将会非常有用。

巴特西

d3.js学习笔记（五）——将数据结构化为D3.js可处理的

最新文章

热门文章