1
我試圖創建d3.js使用圓形停車場佈局的圖表中http://jsfiddle.net/mypandos/h3pfx6ns/如何在d3.js中的圓形包裝佈局中插入餅圖？
<!DOCTYPE html>
<meta charset="utf-8">
<style>
circle {
fill: rgb(31, 119, 180);
fill-opacity: .25;
stroke: rgb(31, 119, 180);
stroke-width: 1px;
}
.leaf circle {
fill: #ff7f0e;
fill-opacity: 1;
}
text {
font: 10px sans-serif;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var diameter = 960,
format = d3.format(",d"),
dataSource = 2;
var pack = d3.layout.pack()
.size([diameter - 3, diameter - 3])
.padding(2)
.sort(function(a, b) {
return -(a.value - b.value);
})
.value(function(d) { return d.size; });
pie = d3.layout.pie();
var svg = d3.select("body").append("svg")
.attr("width", diameter + 300)
.attr("height", diameter);
var data = getData();
var vis = svg.datum(data).selectAll(".node")
.data(pack.nodes)
.enter()
.append("g");
var titles = vis.append("title")
.text(function(d) {
if (!d.children) {
return d.parent.name.toUpperCase() + " - " +
d.name + ": " + d.size;
} else {
return d.name;
}
});
var circles = vis.append("circle")
.attr("stroke", "#bbbbbb")
.style("opacity", function(d) {
return !d.children ? 0.8 : 0.2;
})
.style("fill", function(d) {
return "#f5467";
})
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return d.r; });
var arcs = vis.append("path")
.attr("fill","none")
.attr("id", function(d,i){return "s"+i;})
var arcPaths = vis.append("g")
.style("fill","navy");
var labels = arcPaths.append("text")
.style("opacity", function(d) {
if (d.depth == 0) {
return 0.0;
}
if (!d.children) {
return 0.0;
}
var sumOfChildrenSizes = 0;
d.children.forEach(function(child){sumOfChildrenSizes += child.size;});
//alert(sumOfChildrenSizes);
if (sumOfChildrenSizes <= 5) {
return 0.0;
}
return 0.8;
})
.attr("font-size",10)
.style("text-anchor","middle")
.append("textPath")
.attr("xlink:href",function(d,i){return "#s"+i;})
.attr("startOffset",function(d,i){return "50%";})
.text(function(d){return d.name.toUpperCase();})
function updateVis() {
if (dataSource == 0)
pack.value(function(d) { return d.size; });
if (dataSource == 1)
pack.value(function(d) { return 100; });
if (dataSource == 2)
pack.value(function(d) { return 1 +
Math.floor(Math.random()*301); });
var data1 = pack.nodes(data);
titles = vis.append("title")
.text(function(d) {
if (!d.children) {
return d.parent.name.toUpperCase() + " - " +
d.name + " " + d.size;
} else {
return d.name;
}
});
circles.transition()
.duration(5000)
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return d.r; });
};
function getData() {
return {
"name": "Surveys",
"children": [
{
"name": "NGS",
"children": [
{
"name": "Background",
"children": [
{"name": "Biology", "size":30},
{"name": "Computational biology", "size":17},
{"name": "Statistics","size":13}
]
},
{
"name": "Training needed",
"children": [
{
"name": "Quality control of reads", "size": 20,
"children":[
{"name": "Biology", "size":3},
{"name": "Computational biology", "size":7},
{"name": "Statistics","size":10}
]
},
{"name": "Other", "size": 30,
"children":[
{"name": "Biology", "size":10},
{"name": "Computational biology", "size":10},
{"name": "Statistics","size":10}
]}
]
}
]
}
]
};
};
</script>但我想JSON數據的最後一個孩子是一個餅圖而不是圈子。
有什麼想法？
我發現了一個類似的問題，我貼我的答案後。請參考這一點。 http://stackoverflow.com/questions/26830386/how-to-insert-pie-charts-in-pack-layout-in-d3-js – toshi 2015-01-22 08:52:41