Question

我似乎无法弄清楚为什么我的文字标签没有出现在我的图表上。帮助或建议？上面的链接显示了我的饼图和我的代码以及我的csv数据。

var arvadaData = tributary.arvadaPayments

var sumPayments = d3.sum(arvadaData, function(d) {return +d.payments;});

var svg = d3.select("svg");

var width = 527,
    height = 562,
    radius = Math.min(width, height) / 2;

var outerRadius = width/2;

var colorScale = d3.scale.category20(); //built in range of 20 colors

var arc = d3.svg.arc() //creates <path> elements using arc data
.outerRadius(width / 2)
.innerRadius(100);

var pie = d3.layout.pie()
.sort(null)
.value(function(d){ return +d.payments });

var g = svg.selectAll("g.arc")
.data(pie(arvadaData))
.enter()
.append("g")
    .attr("class", "arc")
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")");


g.append("path")
    .attr("fill", function(d, i){return colorScale(i);})
    .attr("d", arc);

g.append("text")
.attr("transform", function(d){ return "translate(" + arc.centroid(d) +")"; })
.attr("text-anchor", "middle")
.text(function(d){ return d[i].specialty; });

Answer 1

text元素已正确添加和定位，但其内容未正确设置。您正在传递来自饼图布局的数据 - 在这种情况下，原始数据在.data成员下可用。也就是说，设置文本的表达式应为

.text(function(d){ return d.data.specialty; });

完整演示here。

使用d3.js在饼图中添加文本标签时遇到问题

1 个答案: