d3.js学习1----json文件格式

1. JSON 格式
JSON（JavaScript Object Notation）就是javascript对象表示法， 是一种轻量级的数据交换语言，以文字为基础，且易于让人阅读。尽管 JSON 是 Javascript 的一个子集，但 JSON 是独立于语言的文本格式，并且采用了类似于C语言家族的一些习惯。

json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构。

1、对象：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,...}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为 对象.key 获取属性值，这个属性值的类型可以是 数字、字符串、数组、对象几种。

2、数组：数组在js中是中括号“[]”括起来的内容，数据结构为 ["java","javascript","vb",...]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是 数字、字符串、数组、对象几种。
经过对象、数组2种结构就可以组合成复杂的数据结构了。

示例：

名称 / 值对
按照最简单的形式，可以用下面这样的 JSON 表示"名称 / 值对"：
1 {"firstName":"Brett"}
这个示例非常基本，而且实际上比等效的纯文本"名称 / 值对"占用更多的空间：
1 firstName=Brett
但是，当将多个"名称 / 值对"串在一起时，JSON 就会体现出它的价值了。首先，可以创建包含多个"名称 / 值对"的 记录，比如：
1 {"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"}
从语法方面来看，这与"名称 / 值对"相比并没有很大的优势，但是在这种情况下 JSON 更容易使用，而且可读性更好。例如，它明确地表示以上三个值都是同一记录的一部分；花括号使这些值有了某种联系。


表示数组
当需要表示一组值时，JSON 不但能够提高可读性，而且可以减少复杂性。例如，假设您希望表示一个人名列表。在XML中，需要许多开始标记和结束标记；如果使用典型的名称 / 值对（就像在本系列前面文章中看到的那种名称 / 值对），那么必须建立一种专有的数据格式，或者将键名称修改为 person1-firstName这样的形式。
如果使用 JSON，就只需将多个带花括号的记录分组在一起：
{
    "people":[
        {"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"},
        {"firstName":"Jason","lastName":"Hunter","email":"bbbb"},
         {"firstName":"Elliotte","lastName":"Harold","email":"cccc"}
    ]

}

这不难理解。在这个示例中，只有一个名为 people的变量，值是包含三个条目的数组，每个条目是一个人的记录，其中包含名、姓和电子邮件地址。上面的示例演示如何用括号将记录组合成一个值。当然，可以使用相同的语法表示多个值（每个值包含多个记录）：

{
    "programmers": [{
        "firstName": "Brett",
        "lastName": "McLaughlin",
        "email": "aaaa"
    }, {
        "firstName": "Jason",
        "lastName": "Hunter",
        "email": "bbbb"
    }, {
        "firstName": "Elliotte",
        "lastName": "Harold",
        "email": "cccc"
    }],
    "authors": [{
        "firstName": "Isaac",
        "lastName": "Asimov",
        "genre": "sciencefiction"
    }, {
        "firstName": "Tad",
        "lastName": "Williams",
        "genre": "fantasy"
    }, {
        "firstName": "Frank",
        "lastName": "Peretti",
        "genre": "christianfiction"
    }],
    "musicians": [{
        "firstName": "Eric",
        "lastName": "Clapton",
        "instrument": "guitar"
    }, {
        "firstName": "Sergei",
        "lastName": "Rachmaninoff",
        "instrument": "piano"
    }]
}
这里最值得注意的是，能够表示多个值，每个值进而包含多个值。但是还应该注意，在不同的主条目（programmers、authors 和 musicians）之间，记录中实际的名称 / 值对可以不一样。JSON 是完全动态的，允许在 JSON 结构的中间改变表示数据的方式。
在处理 JSON 格式的数据时，没有需要遵守的预定义的约束。所以，在同样的数据结构中，可以改变表示数据的方式，甚至可以以不同方式表示同一事物。


使用方法：

掌握了 JSON 格式之后，在 JavaScript 中使用它就很简单了。JSON 是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。

赋值给变量

例如，可以创建一个新的 JavaScript 变量，然后将 JSON 格式的数据字符串直接赋值给它：

var people = {//people里面有三个属性和值，是programmers authors 和 musicians，它门不一样，用{}
    "programmers": [{//programmers里面有很多个程序员的信息，这些可以构成一个数组，每个数组里面有不一样的属性，照样用{}包括
        "firstName": "Brett",
        "lastName": "McLaughlin",
        "email": "aaaa"
    }, {
        "firstName": "Jason",
        "lastName": "Hunter",
        "email": "bbbb"
    }, {
        "firstName": "Elliotte",
        "lastName": "Harold",
        "email": "cccc"
    }],
    "authors": [{
        "firstName": "Isaac",
        "lastName": "Asimov",
        "genre": "sciencefiction"
    }, {
        "firstName": "Tad",
        "lastName": "Williams",
        "genre": "fantasy"
    }, {
        "firstName": "Frank",
        "lastName": "Peretti",
        "genre": "christianfiction"
    }],
    "musicians": [{
        "firstName": "Eric",
        "lastName": "Clapton",
        "instrument": "guitar"
    }, {
        "firstName": "Sergei",
        "lastName": "Rachmaninoff",
        "instrument": "piano"
    }]
};

这非常简单；people包含前面看到的 JSON 格式的数据。但是，这还不够，因为访问数据的方式似乎还不明显。

访问数据

尽管看起来不明显，但是上面的长字符串实际上只是一个数组；将这个数组放进 JavaScript变量之后，就可以很轻松地访问它。实际上，只需用点号表示法来表示数组元素。所以，要想访问 programmers 列表的第一个条目的姓氏，只需在 JavaScript 中使用下面这样的代码：

1 people.programmers[0].lastName;//花括号里面的就是用.来访问，另一个按数组访问

注意，数组索引是从零开始的。所以，这行代码首先访问 people变量中的数据；然后移动到称为 programmers的条目，再移动到第一个记录（[0]）；最后，访问 lastName键的值。结果是字符串值 “McLaughlin”。

下面是使用同一变量的几个示例。

people.authors[1].genre  // Value is "fantasy"

people.musicians[3].lastName // Undefined. This refers to the fourth entry, and there isn't one
people.programmers[2].firstName // Value is "Elliotte"
利用这样的语法，可以处理任何 JSON 格式的数据，而不需要使用任何额外的 JavaScript 工具包或 API。


修改数据
正如可以用点号和方括号访问数据，也可以按照同样的方式轻松地修改数据：
1 people.musicians[1].lastName="Rachmaninov";

在将字符串转换为 JavaScript 对象之后，就可以像这样修改变量中的数据。

换回字符串
最终结论是，如果要处理大量 JavaScript 对象，那么 JSON 是一个好选择，这样就可以轻松地将数据转换为可以在请求中发送给服务器端程序的格式。
JSON嵌套格式
许多JavaScript树形控件使用JSON嵌套格式描述树形结构，如下所示：
{  
  id: '100000',  
  text: '廊坊银行总行',  
  children: [  
    {  
      id: '110000',  
      text: '廊坊分行',  
      children: [  
        {  
          id: '113000',  
          text: '廊坊银行开发区支行',  
          leaf: true  
        },  
        {  
          id: '112000',  
          text: '廊坊银行解放道支行',  
          children: [  
            {  
              id: '112200',  
              text: '廊坊银行三大街支行',  
              leaf: true  
            },  
            {  
              id: '112100',  
              text: '廊坊银行广阳道支行',  
              leaf: true  
            }  
          ]  
        },  
        {  
          id: '111000',  
          text: '廊坊银行金光道支行',  
          leaf: true  
        }  
      ]  
    }  
  ]  
}  

关于JSON嵌套格式可以搜索百度词条：“多叉树”。

实例比较
XML和JSON都使用结构化方法来标记数据，下面来做一个简单的比较。
用XML表示中国部分省市数据如下：
<?xml version="1.0" encoding="utf-8"?>
<country>
    <name>中国</name>
    <province>
        <name>黑龙江</name>
        <cities>
            <city>哈尔滨</city>
            <city>大庆</city>
        </cities>
    </province>
    <province>
        <name>广东</name>
        <cities>
            <city>广州</city>
            <city>深圳</city>
            <city>珠海</city>
        </cities>
    </province>
    <province>
        <name>台湾</name>
        <cities>
            <city>台北</city>
            <city>高雄</city>
        </cities>
    </province>
    <province>
        <name>新疆</name>
        <cities>
            <city>乌鲁木齐</city>
        </cities>
    </province>
</country>
用JSON表示如下：
{
    "name": "中国",
    "province": [{
        "name": "黑龙江",
        "cities": {
            "city": ["哈尔滨", "大庆"]
        }
    }, {
        "name": "广东",
        "cities": {
            "city": ["广州", "深圳", "珠海"]
        }
    }, {
        "name": "台湾",
        "cities": {
            "city": ["台北", "高雄"]
        }
    }, {
        "name": "新疆",
        "cities": {
            "city": ["乌鲁木齐"]
        }
    }]
}
编码的可读性，xml有明显的优势，毕竟人类的语言更贴近这样的说明结构。json读起来更像一个数据块，读起来就比较费解了。不过，我们读起来费解的语言，恰恰是适合机器阅读，所以通过json的索引.province[0].name就能够读取“黑龙江”这个值。
编码的手写难度来说，xml还是舒服一些，好读当然就好写。不过写出来的字符JSON就明显少很多。去掉空白制表以及换行的话，JSON就是密密麻麻的有用数据，而xml却包含很多重复的标记字符。


2. GeoJSON 格式
GeoJSON 是一种对地理数据结构进行编码的格式。它只是一个采用上述 JSON 格式的用于描述地理信息的格式。它的语法和 JSON 是一样的，只是对各名称做了规范，形如




3. TopoJSON 格式
TopoJSON 是 GeoJSON 简化后的版本，可以说是 GeoJSON 的小孩。D3.js 的作者认为 GeoJSON 不太好，比较推崇 TopoJSON 格式。
TopoJSON 与 GeoJSON 相比，文件大小缩小了 80% ，因为：
 边界线只记录一次（例如广西和广东省的交界线只记录一次）
 不使用浮点数，只使用整数
不过 TopoJSON 似乎只在 D3.js 中比较广泛的使用，还不是世界范围内认可的格式。
要注意，无论 GeoJSON 还是 TopoJSON ，它们本质上有是 JSON 格式的文件，都遵循 JSON 的语法，只不过对变量的名称做了不同的规范。
在 http://mapshaper.org/ 可以试着转换 GeoJSON 和 TopoJSON 的数据，我们会看到对于同一个地理数据文件，TopoJSON 的文件大小大概相当于 GeoJSON 的 20% ，这对于解决因文件量过大而造成的读取速度过慢是相当简单有效的。