0
因此，我們再次咀嚼這些餡餅。d3js餡餅，過濾出較小的圓弧，混合標籤
我已經成功設置了切片（圓弧）和單選按鈕檢查百分比文本變化的餅圖。你可以在下面的鏈接上看到一個例子：http://jsfiddle.net/fBwEe/
所以在那之後我發現了一個小弧和它們的標籤的問題。它們出現在圓弧的中間，因爲它們寬度較寬，所以它們看起來被切掉了。
所以我試圖過濾掉那些較小的圓弧，並將它們的標籤貼近圓的中心，以使它們位於圓弧的外面，但在圓弧的下面。
我用過d3js .filter()函數。我的問題出現了。它們在渲染過程中混合在某處，特別是使用單選按鈕更改顯示數據，甚至數據是空的（如MG數據集上的標籤）。我很困惑，因爲我在控制檯中沒有任何錯誤，但顯然有些錯誤。你可以測試一下在jsfiddle這裏是代碼：
var data_1 = [
{"ASS": 50, "PR": 70, "BPR":3, "MA": 1, "MG": 30},
{"ASS": 3, "PR": 2, "BPR":4, "MA": 40, "MG": 70 },
{"ASS": 20, "PR": 5, "BPR":6, "MA": 2, "MG": ""},
{"ASS": 25, "PR": 2, "BPR":2, "MA": 55, "MG": ""},
{"ASS": 2, "PR": 2, "BPR":2, "MA": 3, "MG": ""},
]
var dataN_1 = [
{"naslov":"Landkreis Starnberg", "total":"23.610", "id":"32829456"}
]
var width_1 = $(".pie_container_1").width();
height_1 = $(".pie_container_1").height();
var svg_1 = d3.select(".pie_container_1").append("svg")
.attr("width", width_1)
.attr("height", height_1)
.attr("id","canvasPie_1")
.attr("preserveAspectRatio","xMinYMid")
.append("g")
.attr("transform", "translate(" + width_1/2 + "," + height_1/2 + ")");
var canvasPie_1 = $("#canvasPie_1"),
aspect = canvasPie_1.width()/canvasPie_1.height(),
containerd3_1 = canvasPie_1.parent();
var targetWidth_1 = containerd3_1.width();
var targetHeight_1 = containerd3_1.height();
canvasPie_1.attr("width", targetWidth_1);
canvasPie_1.attr("height", targetHeight_1);
var radius_1 = Math.min(targetWidth_1, targetHeight_1)/2;
// var color_1 = d3.scale.category20c();
var color_1 = d3.scale.linear().domain([0,1,2,3,4,5]).range(['#c6dbef','#8cb2e0','#548cd3','#16355b','#0f233d']);
var pie_1 = d3.layout.pie()
.value(function(d) { return d.ASS; })
.sort(null);
var arc_1 = d3.svg.arc()
.innerRadius(radius_1 - 40)
.outerRadius(radius_1);
var path_1 = svg_1.datum(data_1).selectAll("path")
.data(pie_1)
.enter().append("g")
.attr("class", "slice")
.append("path")
.attr("fill", function(d, i) { return color_1(i); })
.attr("d", arc_1)
.each(function(d) { this._current = d; }); // store the initial angles
svg_1.selectAll(".slice").filter(function(d) { return d.endAngle - d.startAngle > .2; })
.append("text")
.attr("class","val")
.attr("transform", function(d) {
d.innerRadius = 0;
d.outerRadius = radius_1;
return "translate(" + arc_1.centroid(d) + ")";
})
.style("text-anchor", "middle")
.attr("fill","#FFFFFF")
.style("font-weight","600")
.data(data_1)
.text(function(d) { return d.ASS + "%"; });
svg_1.selectAll(".slice").filter(function(d) { return d.endAngle - d.startAngle < .2; })
.append("text")
.attr("class","valS")
.attr("transform", function(d) {
d.innerRadius = 0;
d.outerRadius = radius_1;
return "translate(" + arc_1.centroid(d)[0] + "," + (arc_1.centroid(d)[1]+7)*0.6 + ")";
})
.style("text-anchor", "middle")
.attr("fill","#777")
.style("font-weight","600")
.data(data_1)
.text(function(d) { return d.ASS + "%"; });
d3.selectAll(".pie_change_1")
.on("change", change_1);
function change_1() {
var value_1 = this.value;
svg_1.selectAll(".val").remove();
svg_1.selectAll(".valS").remove();
// clearTimeout(timeout_1);
pie_1.value(function(d) { return d[value_1]; }); // change the value function
path_1 = path_1.data(pie_1); // compute the new angles
path_1.transition().duration(750).attrTween("d", arcTween_1); // redraw the arcs
svg_1.selectAll(".slice").data(pie_1).filter(function(d) { return d.endAngle - d.startAngle > .2; })
.append("text")
.attr("class","val")
.attr("transform", function(d) {
d.innerRadius = 0;
d.outerRadius = radius_1;
return "translate(" + arc_1.centroid(d) + ")";
})
.style("text-anchor", "middle")
.attr("fill","#FFFFFF")
.style("font-weight","600")
.data(data_1)
.text(function(d) {
if(value_1 == "MG" && d.MG != ""){ return d.MG + "%"; }
if(value_1 == "MA"){ return d.MA + "%"; }
if(value_1 == "BPR"){ return d.BPR + "%"; }
if(value_1 == "PR"){ return d.PR + "%"; }
if(value_1 == "ASS"){ return d.ASS + "%"; }
});
svg_1.selectAll(".slice").data(pie_1).filter(function(d) { return d.endAngle - d.startAngle < .2; })
.append("text")
.attr("class","valS")
.attr("transform", function(d) {
d.innerRadius = 0;
d.outerRadius = radius_1;
return "translate(" + arc_1.centroid(d)[0] + "," + (arc_1.centroid(d)[1]+7)*0.6 + ")";
})
.style("text-anchor", "middle")
.attr("fill","#777")
.style("font-weight","600").data(pie_1).filter(function(d) { return d.endAngle - d.startAngle < .2; })
.data(data_1)
.text(function(d) {
if(value_1 == "MG" && d.MG != ""){ return d.MG + "%"; }
if(value_1 == "MA"){ return d.MA + "%"; }
if(value_1 == "BPR"){ return d.BPR + "%"; }
if(value_1 == "PR"){ return d.PR + "%"; }
if(value_1 == "ASS"){ return d.ASS + "%"; }
});
}
function arcTween_1(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) {
return arc_1(i(t));
};
}
function angle(d) {
var a = (d.startAngle + d.endAngle) * 90/Math.PI - 90;
return a > 90 ? a - 180 : a;
}
任何幫助或建議，歡迎...
做了回答幫助在解決這個問題？ –