收到“错误，为时已晚"用于D3过渡 [英] Getting "Error, too late " for D3 transition

问题描述

我试图在饼图的onClick事件中进行三个转换.第一个转换有效，但是第二个和第三个转换失败.我从Mike Bostocks的一个类似问题的评论中了解到，"这意味着您正在尝试修改已经开始的过渡，或者从已经结束的过渡中获得过渡.请阅读关于过渡生命周期的API参考部分. "

I am trying to do three transitions in onClick event of a Pie Chart. 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."

我似乎仍然无法理解发生这种情况的原因. 这是相关代码:

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);
        }
    });

这是什么问题?

推荐答案

问题是我尝试进行过渡的primaryLabel和secondaryLabel没有正确分配.我完成了以下任务:

The problem was that the primaryLabel and secondaryLabel I was trying to do transition on were not assigned correctly. 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! :)

这篇关于收到“错误，为时已晚"用于D3过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！