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

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. Linux在应用层读写寄存器的方法

    可以通过操作/dev/mem设备文件,以及mmap函数,将寄存器的地址映射到用户空间,直接在应用层对寄存器进行操作,示例如下: #include <stdio.h> #include &l ...

  2. 自己在linux上编译、链接、动态库和静态库的学习笔记

    在平常的项目中,我们都是使用公司要求的makefile.makedebug一类的文件,因此,在编译.链接.生成和链接动态库与静态库的时候,我们只是简单的使用一些已经设置的变量,只是简单的修改.添加一些 ...

  3. Iptables-主机防火墙设置

    基于Iptables构建主机防火墙 Iptables优点: 数据包过滤机制,它会对数据包包头数据进行分析. 1.1.1 加载相关薄块到内核 [root@centos7 ~]# lsmod | egre ...

  4. Serializable中的serialVersionUID到底有啥用

    最近在研究跨进程通信的问题,于是又再一次研究了,我们熟悉而又陌生的Serializable接口. 那么好,做过Java开发的朋友肯定对这个接口不陌生吧,Java中就是通过这个接口,来实现了序列化和反序 ...

  5. 分治法(divide & conquer)与动态规划(dynamic programming)应用举例

    动态规划三大重要概念:最优子结构,边界,状态转移公式(问题规模降低,如问题由 n 的规模降低为 n−1 或 n−2 及二者之间的关系): 0. 爬台阶 F(n)⇒F(n−1)+F(n−2) F(n−1 ...

  6. 电脑c盘清理

    https://www.cnblogs.com/btchenguang/archive/2012/01/20/2328320.html

  7. 11.5 Android显示系统框架_Vsync机制_代码分析

    5.5 surfaceflinger对vsync的处理buffer状态图画得不错:http://ju.outofmemory.cn/entry/146313 android设备可能连有多个显示器,AP ...

  8. Python中的Sets数据结构

    Python的set和其他语言类似,是一个无序不重复元素集,基本功能包括关系测试和消除重复元素.集合对象支持union(联合),intersection(交),difference(差)和sysmme ...

  9. 使用PHP实现双向队列

    使用PHP实现双向队列 一.总结 就是几个array函数 push pop shift unshift n. 移动:变化:手段:轮班 vi. 移动:转变:转换 vt. 转移:改变:替换 二.使用PHP ...

  10. windows apache 跳转 tomcat 代理

    需求是这样的 服务器有tomcat和apache两个服务器 t端口号是8080,a端口是80 比如javaweb的域名是 www.XXX.com:8080 phpweb的域名是  a.XXX.com ...