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]这样的数组操作首先把大括号或者字段名先取出来。
D3.js以及通用JS(JavaScript)读取并解析server端JSON的注意事项的更多相关文章
- JavaScript用JQuery呼叫Server端方法
准备好Server端的方法 [System.Web.Services.WebMethod] public static string VeryUserName(string name) { strin ...
- JS夯实基础:Javascript 变态题解析 (下)
function sidEffecting(ary) { ary[] = ary[]; } function bar(a,b,c) { c = sidEffecting(arguments); ret ...
- JS夯实基础:Javascript 变态题解析 (上)
["].map(parseInt) 1.知识点: Array/map Number/parseInt Global_Objects/parseInt JavaScript parseInt ...
- JS 语言核心(JavaScript权威指南第六版)(阅读笔记)
前言: 对于程序员,学习是无止境的,知识淘换非常快,能够快速稳固掌握一门新技术,是一个程序员应该具备的素质.这里将分享本人一点点不成熟的心得. 了解一门语言,了解它的概念非常重要,但是一些优秀的设计思 ...
- 通用js函数集锦<来源于网络> 【二】
通用js函数集锦<来源于网络> [二] 1.数组方法集2.cookie方法集3.url方法集4.正则表达式方法集5.字符串方法集6.加密方法集7.日期方法集8.浏览器检测方法集9.json ...
- 毫无保留开源我写的:IOS Android Ipad 多点触摸通用js 库
毫无保留开源我写的:IOS Android Ipad 多点触摸通用js 库 在线演示地址: http://m.yunxunmi.com/ 支持 IOS Android Ipad 等不同操作系统的手持或 ...
- jQuery Ajax通用js封装
第一步:引入jQuery库 <script type="text/javascript" src="<%=path%>/resources/js/jqu ...
- 【翻译】在Ext JS 6通用应用程序中使用既共享又特定于视图的代码
原文:Using Both Shared and View-Specific Code in an Ext JS 6 Universal App 在本文,在展示如何编写Ext JS 6通用应用程序代码 ...
- js操作cookie(创建、读取、删除)方法总结
js操作cookie,可以通过开源的插件实现,方便快捷,兼容性好,同样也可以自己写: 此文主要介绍两个常用的插件: Js.cookie.js 和 jQuery.cookie.js 0.Js.cooki ...
随机推荐
- Linux在应用层读写寄存器的方法
可以通过操作/dev/mem设备文件,以及mmap函数,将寄存器的地址映射到用户空间,直接在应用层对寄存器进行操作,示例如下: #include <stdio.h> #include &l ...
- 自己在linux上编译、链接、动态库和静态库的学习笔记
在平常的项目中,我们都是使用公司要求的makefile.makedebug一类的文件,因此,在编译.链接.生成和链接动态库与静态库的时候,我们只是简单的使用一些已经设置的变量,只是简单的修改.添加一些 ...
- Iptables-主机防火墙设置
基于Iptables构建主机防火墙 Iptables优点: 数据包过滤机制,它会对数据包包头数据进行分析. 1.1.1 加载相关薄块到内核 [root@centos7 ~]# lsmod | egre ...
- Serializable中的serialVersionUID到底有啥用
最近在研究跨进程通信的问题,于是又再一次研究了,我们熟悉而又陌生的Serializable接口. 那么好,做过Java开发的朋友肯定对这个接口不陌生吧,Java中就是通过这个接口,来实现了序列化和反序 ...
- 分治法(divide & conquer)与动态规划(dynamic programming)应用举例
动态规划三大重要概念:最优子结构,边界,状态转移公式(问题规模降低,如问题由 n 的规模降低为 n−1 或 n−2 及二者之间的关系): 0. 爬台阶 F(n)⇒F(n−1)+F(n−2) F(n−1 ...
- 电脑c盘清理
https://www.cnblogs.com/btchenguang/archive/2012/01/20/2328320.html
- 11.5 Android显示系统框架_Vsync机制_代码分析
5.5 surfaceflinger对vsync的处理buffer状态图画得不错:http://ju.outofmemory.cn/entry/146313 android设备可能连有多个显示器,AP ...
- Python中的Sets数据结构
Python的set和其他语言类似,是一个无序不重复元素集,基本功能包括关系测试和消除重复元素.集合对象支持union(联合),intersection(交),difference(差)和sysmme ...
- 使用PHP实现双向队列
使用PHP实现双向队列 一.总结 就是几个array函数 push pop shift unshift n. 移动:变化:手段:轮班 vi. 移动:转变:转换 vt. 转移:改变:替换 二.使用PHP ...
- windows apache 跳转 tomcat 代理
需求是这样的 服务器有tomcat和apache两个服务器 t端口号是8080,a端口是80 比如javaweb的域名是 www.XXX.com:8080 phpweb的域名是 a.XXX.com ...