在教程11中，讲述了如何制定颜色，今天要说的是维度的选择以及数据的处理 很多情况下，给我们提供的数据并不是我们想要的数据格式，这个时候你只需要写一个函数 写函数处理数据格式往往是最麻烦的了 当数据是一维的时候我们要求是彩色的 [](image/56a4b25938fd6.jpg)  当数据是多维的时候，我们要求分组   代码如下 ~~~ SaikuChartRenderer.prototype.bubble = function(o){ this.type = "bubble"; options = this.getQuickOptions(o); var data = this.process_data_tree({data: this.rawdata}); var nodes = pv.dom(data).nodes(); var diameter = 300, format = d3.format(",d"), color = d3.scale.category20c(); var bubble = d3.layout.pack() .sort(null) .size([options.width, options.height]) .padding(2.5); var svg = d3.select('#'+options.canvas).append("svg") .attr("width", options.width) .attr("height", options.height) .append("g") .attr("transform", "translate(0,0)"); var node = svg.selectAll(".node") .data(bubble.nodes(pvToJson(nodes[0])) .filter(function(d) { return !d.children; })) .enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); console.log(pvToJson(nodes[0])); 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){ return 0; }) .attr("transform", function(d) { return "translate(" + 0 + "," + 0 + ")"; }) .transition() .duration(2000) .attr("r", function(d) { return d.r;}) //设置圆的半径 .style("fill", function(d) { var colortip =null; if(d.packageName==undefined){ colortip = color(d.className); }else{ colortip = color(d.packageName); 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); }) .attr("font-size","0") .transition() .delay(function(d,i){ return 1500+1*i; }) .attr("font-size","1"); // Returns a flattened hierarchy containing all leaf nodes under the root. /*function classes(root) { var classes = []; function recurse(name, node) { if (node.children) node.children.forEach(function(child) { recurse(node.name, child); }); else {classes.push({ packageName:name,className: node.name, value: node.size,flag:node.flag})}; } recurse(null, root); return {children: classes}; }*/ function pvToJson(root){ var pvToJson = []; function recurse(name, node) { if (node.childNodes.length!=0){ for(var i=0;i<node.childNodes.length;i++){ recurse(node.nodeName,node.childNodes[i]); } } else { pvToJson.push({ packageName:name,className: node.nodeName, value: node.nodeValue}) }; } recurse(null, root); return {children: pvToJson}; } d3.select(self.frameElement).style("height", diameter + "px"); this.chart = svg; }; ~~~ 主要是在给circle添加颜色的时候，给个判断 一个维度的时候，根据className涂色 多个维度的时候，根据packageName涂色