d3数据可视化----CSV&JSON

来源：互联网发布：旅游教学软件编辑：程序博客网时间：2024/05/23 19:27

D3是JavaScript的数据可视化库（http://d3js.org/），参考《数据可视化实战--使用D3设计交互式图表》

源码位于：https://github.com/mbostock/d3/wiki

之前都没有接触过库可以绘制交互图，初次接触D3是出于绘制填充树图。

{     "name": "cluster",     "children": [      {"name": "AgglomerativeCluster", "size": 4},       {"name": "CommunityStructure", "size": 2},      {"name": "MergeEdge", "size": 2}     ]  }

上述文件是JSON串的形式

遇到的主要问题

1、原数据不是JSON格式，而是Excel格式，Excel可以转换为CSV格式，如何实现CSV到JSON。

2、不熟悉d3库的函数

3、数据的读取，对象数组的初次使用

一开始想到两个方案：

1、CSV格式读入，然后转换写入到JSON文件中。数据就可以直接读取JSON串

2、CSV格式读入后存储为JSON的数据格式，即存到数组中。

CSV 文件：

TYPE  a  b  c  a  d  b

CSV的读取：1、读取的CSV数据进行统计 2、CSV的读取是异步的，因此需要完成的操作都要在函数内部

d3.csv("resources/ff.csv",function(error,csv){           var TypeName=[{}];           var nest=d3.nest()     .key(function(d){return d.TYPE;})     .entries(csv);           for(var i=0;i<nest.length;i++)   {    TypeName[i]={"name":nest[i].key,"size":nest[i].values.length};        }          var root = {"name":"root", "children":[{}]};      TypeName.forEach(function(d){    if(typeof root.children[d.name] !== 'undefined') {root.children[d.name].children.push(d); } else {root.children[d.name] = {"name": d.name, "children": [d]}; }});root.children= Object.keys(root.children).map(function (key) { return root.children[key]; });

 <pre name="code" class="plain">    div.selectAll(".node")      .data(treemap.nodes(root))//计算树形布局和返回节点的数组。       .enter().append("div")      .attr("class", "node")      .style("left", function(d) { return d.x + "px"; })      .style("top", function(d) { return d.y + "px"; })      .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })      .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; })            .style("background", function(d) { //只为有孩子的节点赋值，也就是说叶子节点的背景颜色都是他爸爸的颜色      return d.children ? color(d.name) : null;       })      .text(function(d) { //同理，孩子设置文字，爸爸没有      return d.children ? null : d.name;       });});

JSON串读取

d3.json("path/1.json",function(error,json){       console.log(json);});

总结：

本想存储JSON文本再读取，可是写入文本的代码。。。脚本里面可以嵌套Java代码？？？

JavaScript还很不熟悉呀，简单的应用花费大量时间，有些地方貌似还是有点问题

可视化之路其慢慢修远兮~~~~~~~~~暂且这样吧

参考资料：http://codego.net/570269/

http://blog.csdn.net/tianxuzhang/article/details/17151479

1 0