[英]d3.js arc.centroid(d) : Error: Invalid value for <text> attribute transform=“translate(NaN,NaN)”
I'm trying to center the arc labels with the centroid() function as described in D3 documentation . 我正在尝试使用D3 文档中描述的centroid()函数将弧标签居中。
arcs.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.text(function(d) { return "labels"; });
but I'm getting an error on the translate css property : 但我在翻译CSS属性时遇到错误:
Error: Invalid value for attribute transform="translate(NaN,NaN)" 错误:属性transform =“ translate(NaN,NaN)”的值无效
one of the console.log of the (d) objects in : (d)个对象的console.log之一:
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
returns this: 返回此:
data: 80
endAngle: 1.9112350744272506
padAngle: 0
startAngle: 0
value: 80
__proto__: Object
Here's my code: 这是我的代码:
HTML: HTML:
<div id="firstChart"></div>
JS: JS:
var myData = [80,65,12,34,72];
var nbElement = myData.length;
var angle = (Math.PI * 2) / nbElement ;
var myColors = ["#e7d90d", "#4fe70d", "#0de7e0", "#f00000", "#00DC85"];
var width = 1500;
var height = 1500;
var radius = 200;
var canvas = d3.select("#firstChart")
.append("svg")
.attr("height", height)
.attr("width", width);
var group = canvas.append("g")
.attr("transform","translate(310, 310)");
var arc = d3.svg.arc()
.innerRadius(0)
.outerRadius(function (d,i) { return (myData[i]*2); })
.startAngle(function (d,i) { return (i*angle); })
.endAngle(function (d,i) { return (i*angle)+(1*angle); });
var pie = d3.layout.pie()
.value(function (d) { return d; });
var arcs = group.selectAll(".arc")
.data(pie(myData))
.enter()
.append("g")
.attr("class", "arc");
arcs.append("path")
.attr("d", arc)
.attr("fill", function (d, i) { return ( myColors[i] ); });
arcs.append("text")
.attr("transform", function(d) {console.log(d); return "translate(" + arc.centroid(d) + ")"; })
.text(function(d) { return d.data; });
var outlineArc = d3.svg.arc()
.innerRadius(0)
.outerRadius(radius)
.startAngle(function (d,i) { return (i*angle); })
.endAngle(function (d,i) { return (i*angle)+(1*angle); });
var outerPath = group.selectAll(".outlineArc")
.data(pie(myData))
.enter().append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", "2")
.attr("class", "outlineArc")
.attr("d", outlineArc);
You need to pass the index of the element to centroid
as well as the datum: 您需要将元素的索引传递给centroid
以及原点:
.attr("transform", function(d, i) { return "translate(" + arc.centroid(d, i) + ")"; })
During the call to arc.centroid
, D3 calls the arc functions you have created for outerRadius
, startAngle
and endAngle
. 在调用arc.centroid
,D3调用您为outerRadius
, startAngle
和endAngle
创建的弧函数。 However, if you don't pass the index to arc.centroid
, D3 has got no index to pass on to the arc functions, all of which use the index. 但是,如果不将索引传递给arc.centroid
,则D3没有索引可传递给arc函数,所有这些函数都使用索引。 Hence the centroid calculations end up with NaN
s. 因此,质心计算以NaN
结束。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.