SVG indicator while ajax gather all information (D3.js)

Question

I have a SVG (d3.js) visualization which takes some seconds to gather and render all necessary elements.

Now I'd like to have some kind of loader image/text asking my user to wait until it is ready.

I can do it using jQuery, externally of my SVG, but I'd like to "lock" my svg brush/etc and, somehow, only enable my visualization whenever it is ready ! (whenever all async/sync ajax calls are done).

Any insight is highly appreciated !

Cheers.,

score 1 · Answer 1 · edited May 23 '17 at 12:14

I would add an image on top of your canvas, which is hidden as soon as your SVG is loaded. To determine when the SVG is loaded, try this code:

function checkReady() {
    var svg = document.getElementById("svg-element").getSVGDocument();
    if (svg == null) {
        setTimeout("checkReady()", 300);
    } else {
        document.getElementById("svg-loading-img").style.display = "none";
    }
}

From this answer: https://stackoverflow.com/a/337383/1798148

SVG indicator while ajax gather all information (D3.js)

1 Answers1