d3.js学习笔记-08(导入和导出)

d3.js学习笔记-08

1 导入数据

1.1 json文件

1.1.1 json数据格式

1.1.2 读取json文件

• example.json：需要读取的json文件的地址
• function(erroe, data)：data是json文件中的数据；error是出错时的内容

d3.json("example.json", function(erroe, data){   
	console.log(data)
})

1.2 CSV文件

1.2.1 文本格式

使用逗号分隔数据，数据中有逗号的时候可以用引号将数据括起来

1.2.2 读取CSV数据

获取到的csvdata数据是数组

d3.csv("example.csv", function(erroe, csvdata){   
	console.log(csvdata)
})

1.3 XML

1.3.1 XML数据格式

1.3.2 获取XML文件数据

d3.xml("example.xml", function(erroe, xmldata){   
	console.log(xmldata)
	xmldata.getElementByTag("title")[0].innerHtml; 通过xml文件中的tag获取数据
})

1.4 Text文件

d3.text("example.text", function(erroe, textdata){   
	console.log(textdata);
})

2 导出数据

2.1 导出为SVG文件

• SVG Crowbar：谷歌浏览器书签式插件，直接导出为svg文件
• d3-downloadable： 下载地址，下载d3-downloadable.js和d3-downloadable.css

// 样式文件
<link rel-"styleshect" href="d3-downloadable/d3-downloadable.css"/>
// 再引用js文件:
<script src="d3-downloadable/d3-downloadable.js"></script>

2.2 编辑svg

inkscape软件：https://inkscape.org/

References

[1] 吕之华.精通D3.js：交互式数据可视化高级编程[M].北京：电子工业出版社,2015∶191-201.