借鉴: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}
]
}
添加动画效果一: