使用GitHub D3制作一个Bubble Chart简介

今天无意在网上浏览到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}
        ]
    }
   {"name": "Geometry", "size": 10993},
 ]
}

name和child的结构如下图：

画的不太好，但是这意思，name下可以有一个child，child下可有多个name，可以一直往下走，最后在name标签下写入名和值就行了。