基于d3.js简单bubble图

最新推荐文章于 2024-06-24 09:34:57 发布

wl_

最新推荐文章于 2024-06-24 09:34:57 发布

阅读量2.1k

点赞数

分类专栏：可视化文章标签： d3气泡图

本文链接：https://blog.csdn.net/wanglei1991gao/article/details/71445486

版权

可视化专栏收录该内容

19 篇文章 3 订阅

订阅专栏

借鉴：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}
 ]
}

添加动画效果一：
这里写图片描述

代码地址:https://codepen.io/wlei/pen/ELLMLr

wl_

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
4
评论
基于d3.js简单bubble图

借鉴：Hui-NaN博主的博客一、效果图二、html代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="bubble"></div&gt
复制链接

扫一扫