【d3.js教程11】氣泡圖指定顏色 · D3.js征途

下面我們將值為負數的圈圈表示成紅色思路是這樣的，因為存在一個自動生成半徑r的情況，所以在這一步之前數據必須是負數，否則會報錯懶得細細寫了 ?全貼出來自己看 ![](https://box.kancloud.cn/2016-05-23_5742b93a198f6.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(); //設置不同顏色 console.log(color); /*布局設置*/ 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并且拼接 if(dude.value>=0) { startString+="{\"name\":\""+dude.key+"\",\"size\":"+dude.value+",\"flag\":0},"; } else{ startString+="{\"name\":\""+dude.key+"\",\"size\":"+(-dude.value)+",\"flag\":1},"; } }) /*去除最后一個末尾的逗號，這個逗號會影響后面JSON.parse的使用*/ startString = startString.substring(0,startString.length-1); /*拼接尾部字符串*/ startString+="]}"; /*將拼接好的字符串轉換成json對象*/ var json2 = JSON.parse(startString); console.log(json2); /*繪圖部分*/ /*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) { if(d.flag==1){ d.value = -d.value; } return d.className + ": " + (d.value); }); //設置移入時候顯示數據數據名和值 node.append("circle") .attr("r", function(d) { console.log(d); return d.r;}) //設置圓的半徑 .style("fill", function(d) { var colortip = color(d.value); if(d.flag==1){ colortip = "#ff0005"; } return colortip; }); 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,flag:node.flag})}; //如果自身是孩子結點的，將內容壓入數組 } recurse(null, root); return {children: classes}; //返回所有的子節點（包含在children中） } </script> </body> </html> ~~~