D3.js以及通用JS（JavaScript）读取并解析server端JSON的注意事项

这个需求事实上挺明白的。可是网上搜出来的教程都乱七八糟，认为实在须要自己总结一下。

D3.js眼下已经被广泛使用在数据可视化领域，随着大数据的持续发展，这个框架预计会在今后更加流行（据说其作者Mike Bostock開始全职开发了。之前是负责纽约时报数据可视化的project师。他本人也从纽约搬家到了旧金山……）。

依照这里的介绍：https://github.com/mbostock/d3/wiki/API-Reference，D3.js实际上有专门读取JSON数据的API。所以事实上D3.js读server端公布的JSON是很easy的事情，这里我给出一段演示样例代码：

d3.json("http://localhost:8080/XXXX/datasource/HTTP",
    function handle_json_data(data){
        console.log(data)
        console.log(data.results[0]);
        var series=data.results[0].series;
        var contents=series[0];
        var values=contents.values
        console.log(values);
    });

后面这些语句是我在測试过程中用来调试用的，由于实在对JS不了解。所以用这样的方法略微深入了解一下。以下针对后面这些语句进行一些讨论：

依照网上各种教程的介绍，从server端取到的JSON字符串应该先使用eval函数转成JS可以处理的JSON对象，如以下几篇博客：http://blog.csdn.net/beyond0851/article/details/9285771 以及 http://www.cnblogs.com/fishtreeyu/archive/2011/11/05/2237190.html ，当中第一篇博客最后的结论看得我也是醉了。

可是我们看到上面的代码中并没有转换的过程。能够觉得D3.js已经封装了上述处理过程。另外。对于一些复杂的JSON结构，应该怎么样进行处理呢？我上面代码中处理的JSON数据例如以下所看到的：

{
    "results": [
        {
            "series": [
                {
                    "name": "HTTP",
                    "columns": [
                        "time",
                        "durationTime"
                    ],
                    "values": [
                        [
                            "2015-06-18T07:31:44.514Z",
                            23137050
                        ],
                        [
                            "2015-06-18T07:31:46Z",
                            200
                        ],
                        [
                            "2015-06-18T07:31:46.123Z",
                            300
                        ],
                        [
                            "2015-08-08T18:33:50.61Z",
                            763
                        ],
                        [
                            "2015-08-08T18:33:51.505Z",
                            10628
                        ],
                        [
                            "2015-08-08T18:33:53.31Z",
                            43
                        ],
                        [
                            "2015-08-08T18:34:00.223Z",
                            285
                        ],
                        [
                            "2015-08-08T18:34:02.184Z",
                            1491
                        ],
                        [
                            "2015-08-08T18:34:02.295Z",
                            43
                        ],
                        [
                            "2015-08-08T18:34:03.839Z",
                            36
                        ],
                        [
                            "2015-08-08T18:34:04.179Z",
                            1174
                        ],
                        [
                            "2015-08-09T06:33:51.622Z",
                            768
                        ],
                        [
                            "2015-08-09T06:33:52.511Z",
                            11371
                        ],
                        [
                            "2015-08-09T06:33:54.721Z",
                            42
                        ],
                        [
                            "2015-08-09T06:33:56.031Z",
                            98
                        ],
                        [
                            "2015-08-09T06:33:57.969Z",
                            33
                        ],
                        [
                            "2015-08-09T06:34:03.951Z",
                            1376
                        ]
                    ]
                }
            ]
        }
    ]
}

大家能够结合我上面的代码看一下处理过程，实际上记住一条原则就能够：字段名前面是大括号的，直接用“.”号取，有中括号的情况下。要用[0],[1]这样的数组操作首先把大括号或者字段名先取出来。