基于d3.js简单bubble图

来源：互联网发布：金万维免费域名编辑：程序博客网时间：2024/05/22 08:26

借鉴：Hui-NaN博主的博客
一、效果图
这里写图片描述

二、html代码

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <body>        <div id="bubble"></div>        <script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>        <script type="text/javascript" src="js/d3.min.v3x.js"></script>        <script type="text/javascript" src="js/Bubble.js" ></script>        <script type="text/javascript">            var option = {                data:'flare.json',                conEle:'#bubble',                padding:100            }            var bubble = new Bubble(option);            bubble.init();        </script>    </body></html>

三、Bubble.js

/* *依赖d3.min.v3x.js *依赖jquery-1.11.0.min.js */function Bubble(option){    var _defaultOption = {        width:300,        height:300,        padding:1.5,        data:'',        conEle:''    };    option = $.extend(true, _defaultOption,option);    this.width  = option.width;    this.height = option.height;    this.padding= option.padding;    this.data   = option.data;//数据url或对象,必填    this.conEle = option.conEle;//svg容器(node或者选择器)，必填}Bubble.prototype.init = function(){    var that = this,    //1.设置颜色    color = d3.scale.category20c(),    //2.布局    bubble = d3.layout.pack()            .sort(null)            .size([that.width,that.height])            .padding(that.padding),    //3.添加svg元素    svg = d3.select(that.conEle).append("svg")                         .attr("width", that.width)              .attr("height", that.height);    //4.数据请求及图形绘制    if(typeStr(that.data)=='[object string]'){        d3.json(that.data,function(error,data){            if(error) throw error;            var node = svg.selectAll(".node")                  //绑定数据（配置结点）                  .data(bubble.nodes(classes(data))                                                                                   .filter(function(d) {                    //数据过滤，满足条件返回自身（没孩子返回自身，有孩子不返回，这里目的是去除父节点）                    return !d.children;                  }))                  .enter().append("g")                    .attr("class", "node")                    .attr("transform", function(d) {                    //设定g移动                    return "translate(" + d.x + "," + d.y + ")";                   });                 node.append("title")                  .text(function(d) {                    //设置移入鼠标时候显示内容                    return d.className + ": " + (d.value);                 });                         node.append("circle")                  .attr("r", function(d) {                    //设置圆的半径                    return d.r;                })                                                   .style("fill", function(d) {                    //为圆形填充颜色                    return color(d.value);                 });            node.append("text")                .attr("dy", ".3em")                //设置文本对齐                 .style("text-anchor", "middle")                //根据半径的大小来截取对应长度字符串(很重要)                .text(function(d) {                     return d.className.substring(0, d.r / 3);                });        })    }else{        //保留    }    function typeStr(obj){        return Object.prototype.toString.call(obj).toLowerCase();    }    //Returns a flattened hierarchy containing all leaf nodes under the root.      function classes(root){        var classes = [];                                                                                                       /*          * 自定义递归函数         * 第二个参数指传入的json对象          */          function recurse(name, node) {              if (node.children)                                                                                                 {                  node.children.forEach(function(child) {                                                                               recurse(node.name, child);                 })            }              else {                //如果自身是孩子结点的，将内容压入数组                classes.push({ className: node.name, value: node.size})            };         }          recurse(null, root);          return {children: classes};    }}

四、json数据

{ "name": "flare", "children": [    {"name": "35", "size": 50},    {"name": "289", "size": 100},    {"name": "209", "size": 80} ]}

0 0