今天无意在网上浏览到https://github.com/mbostock/d3/wiki/Gallery这个网址,看了看主要是一个通过js在web页面中显示各种图形,上面有很多demo,自己试着做了一个,写写个人感受。
废话少说,进入正题。这是一个Bubble Chart图。
下面是我在做完Bubble Chart后的感受:
代码我就不粘了,自己可以上上面的那个网址去找。只说怎么做,做这么一个图需要三发块:html代码;js代码和json代码。js代码不用我们动,直接引入就行,要是想在本地运行可以先下载后将JS放到自己的项目中,然后修改html文件中的<script src="d3.v4.min.js"></script>src地址就ok了;html代码是我们控制显示打前台页面,可以根据自己的需求去做界面扩充。json里是我们要在泡泡中显示的数据。下面主要看json文件内容:
{
"name": "flare",
"children": [
{"name": "Arrays", "size": 8258},
{
"name": "vis",
"children": [
{"name": "Visualization", "size": 40}
]
}