使用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}
        ]
    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值