I am using D3 with React. There are some animations as part of D3 chart rendering. Once animation is completed, I want to display something in React part of application relying on the rendered element of the D3 chart. But I don't know how to detect whether D3 chart is fully loaded.

I tried using following approaches:

window.addEventListener("load", function () {
  // additional rendering
});

Or

document.addEventListener('DOMContentLoaded', function(event) {
   // additional rendering
});

But none of them works because it does not account for the fact that animation is still happening. Therefore, rendering that relies on D3 chart element catches it in the process of animating, hence displays out of place.

Any tips?