我试图在两个地方的饼图中的每个弧上显示文字。 第一个文本位于弧的中心。 （我能得到它）。 第二个文本应该在圆的直径线上的第一个文本的正下方。
<script src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript"
src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<div class="barChart"></div>
<div class="circles"></div>
<style>
</style>
<script>
$(document).ready(
function() {
circles();
$(".circles").show();
function circles() {
var w = 300;
var h = 300;
var r = h / 2;
var color = d3.scale
.ordinal()
.range(["#FFDA33","#AB33FF","#33FF53","#FF3333" ]); //GPVF
var ydata= [{"good":5,"pto":10,"v":25,"f":8}];
var data = [
{
"label" : ydata[0].good+" oz",
"value" : 25
},
{
"label" : ydata[0].pto+" oz",
"value" : 25
},
{
"label" : ydata[0].v+" C",
"value" : 25
},
{
"label" : ydata[0].f+" C",
"value" : 25
} ];
var vis = d3
.select("body")
.append(
"svg:svg")
.data([ data ])
.attr("width",
w)
.attr("height",
h)
.append("svg:g")
.attr(
"transform",
"translate("
+ r
+ ","
+ r
+ ")");
var pie = d3.layout
.pie()
.value(
function(
d) {
return d.value;
});
var arc = d3.svg.arc()
.outerRadius(r);
var arcs = vis
.selectAll(
"g.slice")
.data(pie)
.enter()
.append("svg:g")
.attr("class",
"slice");
arcs
.append(
"svg:path")
.attr(
"fill",
function(
d,
i) {
return color(i);
// return color(d.data.value)
})
.attr(
"d",
function(
d) {
return arc(d);
})
.attr('stroke',
'#fff')
// <-- THIS
.attr(
'stroke-width',
'3');
// add the text
arcs
.append(
"svg:text")
.attr(
"transform",
function(d,i) {
d.innerRadius = 0;
d.outerRadius = 0;
var c =arc.centroid(d);
return "translate("+c[i]+ ")";
})
.attr("text-anchor","middle")
.style("font-size","32px")
.style("text-decoration","bold")
.text(
function(
d,
i) {
return data[i].label;
});
arcs
.append(
"svg:text")
.attr(
"transform",
function(d) {
d.innerRadius = 0;
d.outerRadius = 0;
var c = arc.centroid(d);
return "translate("+ arc.centroid(d) + ")"; })
.attr("text-anchor","bottom")
.style("font-size","32px")
.style("text-decoration","bold")
.text(
function(
d,
i) {
return data[i].label;
});
}
});
</script>
任何人都可以帮我在直径线上添加第二个文字
答案 0 :(得分：1)
而不是：
return "translate("+c[i]+ ")";
应该是：
return "translate(" + c[0] + "," + c[1] + ")";
正确定位第一个文本。另外，我设置.attr("dominant-baseline", "central")。
关于第二个文字，text-anchor没有“底部”。因为我不明白你的直径线是什么意思，所以我对这些位置进行了硬编码，所以我们可以按照你想要的方式进行调整。
以下是plunker：http://plnkr.co/edit/oyRhdsD7xzQhWkbJVRc3?p=preview
答案 1 :(得分：1)
扩展Gerardo的答案你也可以使用dy属性来设置文本的位置。基本上是这样的
arcs.append("svg:text")
.attr("transform", function(d) {
var c = arc.centroid(d);
return "translate(" + c[0] + "," + c[1] + ")";
})
.attr('dy', '2em')
.attr("text-anchor", "middle")
.style("font-size", "12px")
.style("text-decoration", "bold")
.text(
function(d, i) {
return data[i].label;
});