Javascript 如何让我的D3.js饼图正确过渡
我在这里遗漏了一些东西,我似乎无法理解。我的页面上有另一个饼图,可以平滑过渡,但它处理不同的数据。我在转换过程中不断遇到“属性d:预期的弧标志('0'或'1')等”错误。我已经记录了我用来绘制它的数据(d.(x)Pct),没有一个值是负值。基本上,我创建弧,然后在启动时动态设置端点角度。然后10秒后,当我的更新进来时,它应该用新数据重置endAngle。我的d.(x)Pct数据都小于1,因为1是一个完整的圆。奇怪的是有3个圆圈,中间的一个过渡很好,但其他2个在过渡结束后消失并重新出现。它们会用新数据进行更新,但考虑到它们的消失,您看不到转换。代码如下:Javascript 如何让我的D3.js饼图正确过渡,javascript,jquery,d3.js,Javascript,Jquery,D3.js,我在这里遗漏了一些东西,我似乎无法理解。我的页面上有另一个饼图,可以平滑过渡,但它处理不同的数据。我在转换过程中不断遇到“属性d:预期的弧标志('0'或'1')等”错误。我已经记录了我用来绘制它的数据(d.(x)Pct),没有一个值是负值。基本上,我创建弧,然后在启动时动态设置端点角度。然后10秒后,当我的更新进来时,它应该用新数据重置endAngle。我的d.(x)Pct数据都小于1,因为1是一个完整的圆。奇怪的是有3个圆圈,中间的一个过渡很好,但其他2个在过渡结束后消失并重新出现。它们会用新
// Creates the arc for the pie chart
var pieArc = d3.svg.arc()
.startAngle(0)
.innerRadius(0)
.outerRadius(100);
// Draw the circles (carrierServices portion)
var pieChartsCarrierServices = pieChartsSvg.selectAll(".CarrierServicesPies").data(data);
pieChartsCarrierServices.enter()
.append("path")
.attr({
"class": "CarrierServicesPies",
"d": function (d) {
pieArc.endAngle((2 * Math.PI) * d.carrierServicesPct)
return pieArc();
},
"transform": function (d) {
var w = $(this).parent().width();
return "translate(" + (w/2) + "," + (yScale(d.id) + 50) + ")" // Radius divided by 2 to center with bar graphs
},
"fill": "white"
});
pieChartsCarrierServices.exit().remove();
pieChartsCarrierServices.transition().duration(750)
.attr({
"d": function (d) {
pieArc.endAngle((2 * Math.PI) * d.carrierServicesPct)
return pieArc();
}
});
@我也遇到了一些事情。只有当这两个百分比之间的差值大于.25时,它才会消失…@SiddP我也遇到了一些问题。只有当两个百分比之间的差值大于0.25…时,它才会消失。。。。