bug(arc): mouse events are breaking transitions

Description

We have following data structure: One column can have multiple children, which can also have multiple children and so on. The value of the parent column is equal to the sum of the children column values.

If you click on column in the chart, it unloads current columns and loads the children columns of the clicked column and so on. We call it “drill down”. In the example below you can “drill down” to the third level of children elements. As you can see here: If you click on the column, it unloads and loads new columns, but the transition gets interrupted by mouseover event and the arc doesn’t expand to the full size. It should look like this (don’t worry about the arc not expanding and focusing on mouseover, I disabled expandArc and $$.api.focus() to be able to show the expected behaviour): It seems like $$.transiting doesn’t have the right state in arc.on(“mouseover”). This function also calls selectArc which calls $$.expandArc(id) and $$.api.focus(id) which trigger some transitions that intterupt the transition triggered on redrawing the pie.

Steps to check or reproduce

1. Open this example
2. Click around the center of the pie chart to trigger columns update.
3. Don’t move your mouse. It will stop the pie transition.
4. If you resize window or hide the column the chart will redraw to expected size.

[michkami]

I tested it in our code and it works! Thank you @netil 😃

[netil]

Is not a clear solution, but this will work as expected on your case. I’ll be considering if there’s an effective solution for this.

 done: () => {
		const {svg} = chart.$;
		const duration = chart.config("transition.duration");

		setTimeout(() => {
			svg.style("pointer-events", "none");
			chart.flush(true);

			setTimeout(() => {
				svg.style("pointer-events", null);
			}, duration);
       }, 0);
    }