D3.js学习笔记十:使用CSV文件作为动态数据源

2015年02月15日 javascript 暂无评论 阅读 1,935 views 次
D3.js学习笔记十:使用CSV文件作为动态数据源

要解决的问题

D3.js支持从外部读取数据进行图形交互(Loading External Resources),支持的格式有CSV、txt、Html、tsv、xml文本文件和JSON XML数据结构,下面列出了它的读取外部资源的类型,是从它的wiki里面截取下来的。

  • d3.text - 请求一个text文件。
  • d3.json - 请求一个JSON。
  • d3.html - 请求一个html文本片段。
  • d3.xml - 请求一个XML文本片段。
  • d3.csv - 请求一个CSV(comma-separated values, 逗号分隔值)文件。
  • d3.tsv - 请求一个TSV(tab-separated values, tab分隔值)文件。

我们先来看它读取CSV数据文件的功能:

读取CSV文件的方法

读取CSV文件,要使用它的d3.csv(filename,[function(error,data){}])方法,直接将文件读到程序中,例如下面的代码读取dada.csv并将结果格式化后保存到data变量里面,注意要测试这个功能,需要将代码放置在服务器目录下使用WEB URL(类似http://localhost/test.html)进行测试

d3.csv("data.csv", function(error, csv){
var data=[];
var xMark=[];
csv.forEach(function(d)
{
dataset.push(parseFloat(d.value));
xMark.push(d.title);
});....其它事件处理代码....

});

data.csv存放数据,第一行为变量名称。

title,value
标签1,100
标签2,200
标签3,300
...

读取数据并用折线图显示出来

读取外部数据,因为是异步执行的,需要将数据处理以及数据应用代码放置在数据结果处理函数中,否则可能因为异步数据,导致代码执行时数据还没有读到,因此引发不可测的后果。从csv读取数据并显示在折线图上,示例代码如下

//读取CSV文件
d3.csv("data.csv",function(error,csv)
{
var dataset=[];
var xMark=[];csv.forEach(function(d)
{
dataset.push(parseFloat(d.value));
xMark.push(d.title);
});

var chart=new magicdataLine(10,10);
chart.title="从CSV文件中读取的数据";
chart.dataset=[dataset];
chart.xMarks=xMark;
chart.lineNames=["系列1"];
chart.draw();

});

代码非常简单,D3.js在后台将数据读取和处理工作全部替我们完成了,我们只需要读取数据并转换成我们想要的类型即可,从利用外部数据的便利性来看,水晶易表灵活性和便利性都稍差一些。但是从用户角度来讲,水晶易表面向的是业务人员,它可以不用掌握很多计算机技术就能做出很好的报告,而D3.js面向的是技术人员,并非普通人随便就能够掌握的。比较它们的二次开发效果,基本上工作量差不多,但是Flex的编程工具更成熟,相对来讲,D3.js的文档资料尤其是中文资料太少了。

10_1

示例文件地址:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>从CSV文件中读取数据画一个折线图</title>
<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="js/msgicdataLine.js"></script>
</head>
<style type="text/css">
body{
height: 100%;
}
.title{font-family:Arial,微软雅黑;font-size:18px;text-anchor:middle;}
.subTitle{font-family:Arial,宋体;font-size:12px;text-anchor:middle;fill:#666}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
fill:#999;
}
.inner_line path,
.inner_line line {
fill: none;
stroke:#E7E7E7;
shape-rendering: crispEdges;
}
.legend{font-size: 12px; font-family:Arial, Helvetica, sans-serif}
.tiptools
{
display:block;
background-color:#FFF;
border:1px solid #E7E7E7;
padding:10px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
cursor:pointer;
}
</style>
<body>
<script type="text/javascript">
//读取CSV文件
d3.csv("data.csv",function(error,csv)
{
var dataset=[];
var xMark=[];
csv.forEach(function(d)
{
dataset.push(parseFloat(d.value));
xMark.push(d.title);
});
var chart=new magicdataLine(10,10);
chart.title="从CSV文件中读取的数据";
chart.subTitle="";
chart.dataset=[dataset];
chart.xMarks=xMark;
chart.lineNames=["系列1"];
chart.draw();
});
</script>
</body>
</html>

 

,打开后右键查看源码。

 

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.  

用户登录

分享到: