【d3.js教程10】气泡图bubble chart

来源：互联网发布：windows 远程桌面打开编辑：程序博客网时间：2024/05/01 00:35
<!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>
1 0