D3 的新功能。制作圆环图但仅显示部分标签,不知道为什么。
http://dailyspiro.com/impact.html
var data = [
{name: "Facebook", val: 26},
{name: "Gmail", val: 19},
{name: "Twitter", val: 7},
{name: "Jane's Blog", val: 5},
{name: "Other", val: 21 }
];
var w = 400,
h = 400,
r = Math.min(w, h) / 2,
labelr = r + 30, // radius for label anchor
donut = d3.layout.pie(),
arc = d3.svg.arc().innerRadius(r * .6).outerRadius(r);
var vis = d3.select(".impact-chart")
.append("svg:svg")
.data([data])
.attr("width", w + 150)
.attr("height", h);
var arcs = vis.selectAll("g.arc")
.data(donut.value(function(d) { return d.val }))
.enter().append("svg:g")
.attr("class", "arc")
.attr("transform", "translate(" + (r + 30) + "," + r + ")");
var color = d3.scale.ordinal()
.range(["#C1B398", "#605951", "#FBEEC2", "#61A6AB", "#ACCEC0", "#bbb"]);
arcs.append("svg:path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc);
arcs.append("svg:text")
.attr("transform", function(d) {
var c = arc.centroid(d),
x = c[0],
y = c[1],
// pythagorean theorem for hypotenuse
h = Math.sqrt(x*x + y*y);
return "translate(" + (x/h * labelr) + ',' +
(y/h * labelr) + ")";
})
.attr("dy", ".35em")
.attr("text-anchor", function(d) {
// are we past the center?
return (d.endAngle + d.startAngle)/2 > Math.PI ?
"end" : "start";
})
.text(function(d, i) { return d.data.name;});
</script>
最佳答案
看起来标签位于 svg 之外。您可以通过更改
轻松看到这一点labelr = r + 30;
到
labelr = r - 30;
您可以通过如上所述减小半径(如果您不介意标签接触圆环图)或增加 svg 的大小以便为标签留出空间来解决此问题。
如果您想在保持控制图像宽度和高度的能力的同时为标签留出空间,您可以添加一个缩放常量。
收缩 = 60
将圆的半径减小这个量:
r = Math.min(w, h)/2 - 收缩,
然后平移圆圈,使其位于 svg 的中间:
.attr("transform", "translate("+ (r+shrink) + ","+ (r+shrink) + ")");
这是一个固定版本的 fiddle 。 http://jsfiddle.net/JonathanPullano/qA6t6/13/
关于html - 标签未显示在 D3 圆环图上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22237136/