[英]D3.js: Placin' the text on the arcs of the doughnut chart
我对D3.js相当陌生,一直在研究D3甜甜圈图。 我试图在圆弧上附加文字,但所有文字都在中间挤在一起。 我尝试了一些在StackOverflow上发现的修复程序,但似乎都没有帮助。
码:
var margin = {top :30, right: 30, bottom: 40, left: 50}
var height = 600,
width = document.getElementById('chart').clientWidth;
var outerRadius = height / 2 - 20,
innerRadius = outerRadius / 2,
cornerRadius = 10;
var pie = d3.layout.pie()
.sort(null)
.padAngle(.02);
var arc = d3.svg.arc()
.padRadius(outerRadius)
.innerRadius(innerRadius);
d3.tsv("data.tsv", function(error, data) {
var svg = d3.select("#chart").append("svg")
.style('background','#E7E0CB')
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
svg.selectAll("path")
.data(pie(thedata))
.enter().append("g")
.attr('class', 'slice')
var slice = d3.selectAll('g.slice')
.append('path')
.each(function(d) { d.outerRadius = outerRadius - 20; })
.attr("d", arc)
.attr('fill', function(d, i){return colors(i)})
.on("mouseover", arcTween(outerRadius, 0))
.on("mouseout", arcTween(outerRadius - 20, 150));
var text = d3.selectAll('g.slice')
.append('text')
.data(data)
.text(function(d , i){
return d.domain;
})
.attr('fill', 'white')
.attr('text-anchor', 'middle')
.attr('transform', function(d, i){
d.innerRadius =innerRadius;
d.outerRadius = outerRadius;
return 'translate('+arc.centroid(d)+')'
})
})
function arcTween(outerRadius, delay) {
return function() {
d3.select(this).transition().delay(delay).attrTween("d", function(d) {
var i = d3.interpolate(d.outerRadius, outerRadius);
return function(t) { d.outerRadius = i(t); return arc(d); };
});
};
}
这是data.tsv:
value domain
17142857 Increment
2857143 Timber
115310 Fruits
这里的问题很少。
1.)您尚未为pie
函数赋予访问器函数:
var pie = d3.layout.pie()
.sort(null)
.padAngle(.02)
.value(function(d) { return d.value; }); //<-- add this
2.)您的文本标签也需要绑定到pie(data)
因为arc.centroid
需要的是该格式的数据。 完成后,标签现在为d.data.domain
:
var text = d3.selectAll('g.slice')
.append('text')
.data(pie(data))
.text(function(d, i) {
return d.data.domain;
})
.attr('fill', 'white')
.attr('text-anchor', 'middle')
.attr('transform', function(d, i) {
d.innerRadius = innerRadius;
d.outerRadius = outerRadius;
return 'translate(' + arc.centroid(d) + ')'
});
完整的工作代码:
<!DOCTYPE html> <html> <head> <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> </head> <body> <script> var margin = { top: 30, right: 30, bottom: 40, left: 50 } var height = 600, width = 600; var outerRadius = height / 2 - 20, innerRadius = outerRadius / 2, cornerRadius = 10; var pie = d3.layout.pie() .sort(null) .padAngle(.02) .value(function(d) { return d.value; }); var arc = d3.svg.arc() .padRadius(outerRadius) .innerRadius(innerRadius); var colors = d3.scale.category10(); //d3.csv("data.csv", function(error, data) { var data = [{ "value": "17142857", "domain": "Increment" }, { "value": "2857143", "domain": "Timber" }, { "value": "115310", "domain": "Fruits" }]; var svg = d3.select("body").append("svg") .style('background', '#E7E0CB') .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); svg.selectAll("path") .data(pie(data)) .enter().append("g") .attr('class', 'slice') var slice = d3.selectAll('g.slice') .append('path') .each(function(d) { d.outerRadius = outerRadius - 20; }) .attr("d", arc) .attr('fill', function(d, i) { return colors(i) }) .on("mouseover", arcTween(outerRadius, 0)) .on("mouseout", arcTween(outerRadius - 20, 150)); var text = d3.selectAll('g.slice') .append('text') .data(pie(data)) .text(function(d, i) { return d.data.domain; }) .attr('fill', 'white') .attr('text-anchor', 'middle') .attr('transform', function(d, i) { d.innerRadius = innerRadius; d.outerRadius = outerRadius; return 'translate(' + arc.centroid(d) + ')' }) // }) function arcTween(outerRadius, delay) { return function() { d3.select(this).transition().delay(delay).attrTween("d", function(d) { var i = d3.interpolate(d.outerRadius, outerRadius); return function(t) { d.outerRadius = i(t); return arc(d); }; }); }; } </script> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.