在教程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涂色
- 前言
- 【d3.js教程01】d3入門
- 【d3.js教程02】d3入門
- 【d3.js教程03】動態初探索
- 【d3.js教程04】互動第一步
- 【d3.js教程05】簡單的圖標之弧形
- 【d3.js教程06】force 力導向圖
- 【d3.js教程07】弦圖
- 【d3.js教程08】集群圖cluster
- 【d3.js教程09】包圖pack
- 【d3.js教程10】氣泡圖bubble chart
- 【d3.js教程11】氣泡圖指定顏色
- 【d3.js教程12】地圖
- 【d3.js教程13】氣泡圖一維與多維展示以及數據處理
- 【d3.js教程14】可拖動的地圖詳解
- 【d3.js教程15】如何從excel等表格生成csv數據