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

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]这样的数组操作首先把大括号或者字段名先取出来。

D3.js以及通用JS(JavaScript)读取并解析server端JSON的注意事项的更多相关文章

  1. JavaScript用JQuery呼叫Server端方法

    准备好Server端的方法 [System.Web.Services.WebMethod] public static string VeryUserName(string name) { strin ...

  2. JS夯实基础:Javascript 变态题解析 (下)

    function sidEffecting(ary) { ary[] = ary[]; } function bar(a,b,c) { c = sidEffecting(arguments); ret ...

  3. JS夯实基础:Javascript 变态题解析 (上)

    ["].map(parseInt) 1.知识点: Array/map Number/parseInt Global_Objects/parseInt JavaScript parseInt ...

  4. JS 语言核心(JavaScript权威指南第六版)(阅读笔记)

    前言: 对于程序员,学习是无止境的,知识淘换非常快,能够快速稳固掌握一门新技术,是一个程序员应该具备的素质.这里将分享本人一点点不成熟的心得. 了解一门语言,了解它的概念非常重要,但是一些优秀的设计思 ...

  5. 通用js函数集锦<来源于网络> 【二】

    通用js函数集锦<来源于网络> [二] 1.数组方法集2.cookie方法集3.url方法集4.正则表达式方法集5.字符串方法集6.加密方法集7.日期方法集8.浏览器检测方法集9.json ...

  6. 毫无保留开源我写的:IOS Android Ipad 多点触摸通用js 库

    毫无保留开源我写的:IOS Android Ipad 多点触摸通用js 库 在线演示地址: http://m.yunxunmi.com/ 支持 IOS Android Ipad 等不同操作系统的手持或 ...

  7. jQuery Ajax通用js封装

    第一步:引入jQuery库 <script type="text/javascript" src="<%=path%>/resources/js/jqu ...

  8. 【翻译】在Ext JS 6通用应用程序中使用既共享又特定于视图的代码

    原文:Using Both Shared and View-Specific Code in an Ext JS 6 Universal App 在本文,在展示如何编写Ext JS 6通用应用程序代码 ...

  9. js操作cookie(创建、读取、删除)方法总结

    js操作cookie,可以通过开源的插件实现,方便快捷,兼容性好,同样也可以自己写: 此文主要介绍两个常用的插件: Js.cookie.js 和 jQuery.cookie.js 0.Js.cooki ...

随机推荐

  1. Activity启动过程源代码分析

    事实上写分析源代码文章总会显得非常复杂非常乏味,可是梳理自己看源代码时的一些总结也是一种提高. 这篇博客分析下Activity启动过程源代码,我会尽量说得简单点. 个人的观点是看源代码不能看得太细,否 ...

  2. Windows Route 路由表命令整理

    Windows Route 路由表命令 在本地 IP 路由表中显示和修改条目. 语法 route [-f] [-p] [Command [Destination] [mask Netmask] [Ga ...

  3. Rdis-主从复制

    配置 配置一个从服务器非常简单, 只要在配置文件中增加以下的这一行就可以了: slaveof 192.168.1.1 6379 注:主:bind 192.168.10.1 (指定主机IP) 当然, 你 ...

  4. localStorage存储数据位置

    chrome浏览器:C:\Users\Username\AppData\Local\Google\Chrome\User Data\Default\Local Storage 中,虽然后缀名是.loc ...

  5. Dcloud课程7 单例模式一般用在什么场景

    Dcloud课程7 单例模式一般用在什么场景 一.总结 一句话总结:连接数据库,这样就保证了和数据之间只有一个连接,从而能够不占用多余资源,这样就极大的减少了资源浪费,减少了mysql或者说服务器压力 ...

  6. Java FutureTask Example Program(Java FutureTask例子)

    Sometime back I wrote a post about Java Callable Future interfaces that we can use to get the concur ...

  7. Redis学习笔记(六)---List

    1.ArrayList与LinkList的区别 ArrayList的使用数组存入的方式,所以根据索引查询数据速度快,而增删元素是比较慢的,它需要将数据一位一位的移动,知道达到要求. LinkList使 ...

  8. POJ 2479 Maximum sum POJ 2593 Max Sequence

    d(A) = max{sum(a[s1]..a[t1]) + sum(a[s2]..a[t2]) | 1<=s1<=t1<s2<=t2<=n} 即求两个子序列和的和的最大 ...

  9. js读取json,纠结。。。

    什么是json.先小抄一段:  JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.採用全然独立于语言的文本格式, 是理想的数据交换格式,同一时候,JSO ...

  10. bootstrap+fileinput插件实现可预览上传照片功能

    实际项目中运用: 功能:实现上传图片,更改上传图片,移除图片的功能 <!DOCTYPE html> <html> <head> <meta charset=& ...