【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> ~~~