我无法正确排列两环圆环图的标签。我认为这与将标签附加到 gs var 而不是路径 var 有关，但如果我进行该切换，标签根本不可见。最后，我希望每个标签都以每个切片的 Angular 和半径为中心。
代码在这里:
<html>
<body>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
text {
font: 10px sans-serif;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
</style>
<svg class="chart"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var dataset = {
bip: [.2, .1, .3, .05, .05, .2],
position: [0, 25, 35, 25, 15, 0]
};
var width = 450,
height = 450,
cwidth = 250;
var color = d3.scale.category10();
var pie = d3.layout.pie()
.sort(null)
.startAngle(Math.PI * -.25)
.endAngle(Math.PI * .25)
;
var arc = d3.svg.arc();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.style("border", "1px solid black")
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height + ")")
;
var gs = svg.selectAll("g")
.data(d3.values(dataset))
.enter()
.append("g");
var path = gs.selectAll("path")
.data(function(d) { return pie(d); })
.enter()
.append("path")
.attr("fill", function(d,i,j) {
return "rgb(" + 255*(1-j) + "," + (166 + d3.round(89*d.value,0))*(1-j) + "," + d3.round(255*d.value,0)*(1-j) + ")" ;
})
.attr("d", function(d, i, j) {
return arc.innerRadius(cwidth*j).outerRadius(cwidth-5+50*j) (d);
})
.style('stroke', 'white')
.style('stroke-width', 5)
;
//Labels
gs.append("svg:text")
.attr("transform", function(d, i, j) {
d.startAngle = (Math.PI * -.75 + Math.PI*i/6);
d.endAngle = (Math.PI * .25 + Math.PI*i/6);
d.innerRadius = cwidth*j;
d.outerRadius = cwidth-5+50*j;
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.style("fill", "white")
.style("font", "bold 12px Arial")
.text(function(d, i, j) { return d; });
</script>
</body>
</html>
示例在这里: http://jsfiddle.net/sgrossman/kzh7c8mn/
感谢您的帮助。
最佳答案
我认为您关于附加到 gs 与路径变量的问题是正确的。
我这里有一个 fiddle ，它的工作方式有点像你想要的。它为每个弧元素创建文本和文本路径，并通过 ID 链接它们。居中并不完美，但可以通过反复试验进行调整。
//Add an id to the path
.attr("id", function(d, i, j){return 'path_' + i + '_'+ j;})
为每个数据点添加 svg:text 和 textPath:
gs.selectAll("g").data(function (d, i, j) {
return d;
})
.enter().append('svg:text')
.attr("dx", function(d,i,j){
if(j==1) {return (d * 2) + 8;}
else {return (d * 250) - 15;}
})
.attr("dy", 25)
.append('textPath')
.attr("stroke","white")
//Link via xlink:href
.attr("xlink:href",function(d,i,j){
return '#path_' + i + '_' + j;
})
.text(function (d, i, j) {
return d;
});
关于javascript - 无法使 d3 圆环图标签正确排列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28663313/