[英]Getting “Error, too late ” for D3 transition
I am trying to do three transitions in onClick event of a Pie Chart. 我正在尝试在饼图的onClick事件中进行三个转换。 The first transition works but the second and the third one fail. 第一个转换有效,但是第二个和第三个转换失败。 I understood from Mike Bostocks comment on a similar question that " This means you are trying to modify a transition that has already started, or derive a transition from one that has ended. Please read the API Reference section on transition life cycles. " 我从Mike Bostocks的一个类似问题的评论中了解到,“ 这意味着您正在尝试修改已经开始的过渡,或者从已经结束的过渡中获得过渡。请阅读关于过渡生命周期的API参考部分。 ”
I still cant seem to understand the reason why this is happening. 我似乎仍然无法理解发生这种情况的原因。 Here is the relevant code: 以下是相关代码:
self.primaryLabelText = self.arc.append("text")
.on("click", function (d: any) {
console.log("About to send::::" + getStudyLabel(d.index));
self.selectedIndustryTypeService.sendMessage(getStudyLabel(d.index));
self.showDialog();
// The amount we need to rotate:
var rotate = 180-(d.startAngle + d.endAngle)/2 / Math.PI * 180;
// Transition the pie chart
g.transition()
.attr("transform", "translate(" + self.width / 2 + "," + self.height / 2 + ") rotate(" + rotate + ")")
.duration(1000);
// Τransition the labels:
self.primaryLabelText.transition()
.attr("transform", function(dd: any) {
return "translate(" + label.centroid(dd) + ") rotate(" + (-rotate) + ")"; })
.duration(1000);
self.secondaryLabelText.transition()
.attr("transform", function(dd: any) {
return "translate(" + label.centroid(dd) + ") rotate(" + (-rotate) + ")"; })
.duration(1000);
})
.transition()
.duration(750)
.attr("transform", function (d: any) {
return "translate(" + label.centroid(d) + ")";
})
.attr("dy", "-0.75em")
.attr("font-family", "sans-serif")
.attr("font-size", "15px")
.attr("text-anchor", "middle")
.attr("class", "sponsor-pie-widget-label")
.text(function (d: any) {
if (d.endAngle - d.startAngle < 0.3) {
return "";
} else {
return getStudyLabel(d.index);
}
});
What is the issue here? 这是什么问题?
The problem was that the primaryLabel and secondaryLabel I was trying to do transition on were not assigned correctly. 问题是我尝试进行过渡的primaryLabel和secondaryLabel没有正确分配。 I had the following assignment: 我有以下作业:
self.primaryLabelText = self.arc.append("text")
.on("click", function (d: any) {
self.rotateChart(d);
}).transition()
.duration(750)
.attr("transform", function (d: any) {
return "translate(" + self.label.centroid(d) + ")";
})
.attr("dy", "-0.75em")
.attr("font-family", "sans-serif")
.attr("font-size", "15px")
.attr("text-anchor", "middle")
.attr("class", "sponsor-pie-widget-label")
.text(function (d: any) {
if (d.endAngle - d.startAngle < 0.3) {
return "";
} else {
return getStudyLabel(d.index);
}
});
As a result of this, the variables contained the reference to the transitions and not the labels themselves as when you chain transitions it gets changed to a transition type object. 结果,变量包含对过渡的引用,而不是标签本身,因为当您链接过渡时,变量将变为过渡类型对象。 So I changed that to this: 所以我将其更改为:
self.primaryLabelText = self.arc.append("text")
.on("click", function (d: any) {
self.rotateChart(d);
});
self.primaryLabelText.transition()
.duration(750)
.attr("transform", function (d: any) {
return "translate(" + self.label.centroid(d) + ")";
})
.attr("dy", "-0.75em")
.attr("font-family", "sans-serif")
.attr("font-size", "15px")
.attr("text-anchor", "middle")
.attr("class", "sponsor-pie-widget-label")
.text(function (d: any) {
if (d.endAngle - d.startAngle < 0.3) {
return "";
} else {
return getStudyLabel(d.index);
}
});
It all works now! 现在一切正常! :) :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.