【d3.js教程10】气泡图bubble chart · D3.js征途

![](https://box.kancloud.cn/2016-05-23_5742b9377759e.jpg) ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/d3.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> text{ font-size: 7px; } </style> </head> <body> <script type="text/javascript"> var diameter = 300, //设置宽高 color = d3.scale.category20c(); //设置不同颜色 /*布局设置*/ var bubble = d3.layout.pack() //初始化包图 .sort(null) //后面的数减去前面的数排序，正负都变，null顺序不变 .size([diameter, diameter]) //设置范围 .padding(1.5); //设置间距 /*获取并添加svg元素，并设置宽高*/ var svg = d3.select("body").append("svg") .attr("width", diameter) .attr("height", diameter); /*假定后台传入的数据*/ var data = {贾嫒: 45494.848, 巩嫒: 16720.788, 余嫒: 26449.724, 梁安: 21023.016, 彭安: 3729.6}; /*entries可以将如上类型的格式转换成{key:家园,value:343434}的数组*/ var result = d3.entries(data); /*以下是字符串拼接*/ var startString = "{\"name\": \"flare\",\"children\": ["; //开头字符串 result.forEach(function(dude){ //遍历result并且拼接 startString+="{\"name\":\""+dude.key+"\",\"size\":"+dude.value+"},"; }) /*去除最后一个末尾的逗号，这个逗号会影响后面JSON.parse的使用*/ startString = startString.substring(0,startString.length-1); /*拼接尾部字符串*/ startString+="]}"; /*将拼接好的字符串转换成json对象*/ var json2 = JSON.parse(startString); /*绘图部分*/ console.log(classes(json2)); var node = svg.selectAll(".node") .data(bubble.nodes(classes(json2)) //绑定数据（配置结点） .filter(function(d) { return !d.children; })) //数据过滤，满足条件返回自身（没孩子返回自身，有孩子不返回，这里目的是去除父节点） .enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); //设定g移动 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); }); //根据半径的大小来截取对应长度字符串（很重要） // Returns a flattened hierarchy containing all leaf nodes under the root. function classes(root) { var classes = []; //存储结果的数组 /*自定义递归函数 * * 第二个参数指传入的json对象 * */ function recurse(name, node) { if (node.children) //如果有孩子结点（这里的children不是自带的，是json里面有的） { node.children.forEach(function(child) { //将孩子结点中的每条数据 recurse(node.name, child); }) } else {classes.push({ className: node.name, value: node.size})}; //如果自身是孩子结点的，将内容压入数组 } recurse(null, root); return {children: classes}; //返回所有的子节点（包含在children中） } </script> </body> </html> ~~~