【d3.js教程13】气泡图一维与多维展示以及数据处理
最后更新于：2022-04-01 14:18:22
在教程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涂色