wait till loading of json file

4,989 views
Skip to first unread message

ani

unread,
Nov 7, 2011, 11:05:25 AM11/7/11
to d3-js
When I try to load json file it just jump to next function before the
json file loaded so How can I make it wait till the json file loaded
completely

Ex.

function init(){
d3.json("/tgac/miso/d3graph/project", function(json) {
mainjson = json;
json.x0 = 800;
json.y0 = 0;
updatetree(root = json);
});

}

function changetree(){
...
}


init();

// wait here

changetree();

Anil

Lars Kotthoff

unread,
Nov 7, 2011, 11:10:40 AM11/7/11
to d3...@googlegroups.com, anilth...@gmail.com
Put the function you want to wait inside the d3.json function, i.e.

> function init(){
> d3.json("/tgac/miso/d3graph/project", function(json) {
> mainjson = json;
> json.x0 = 800;
> json.y0 = 0;
> updatetree(root = json);
>
>

> changetree();
> });
>
> }
> init();

Lars

ani

unread,
Nov 7, 2011, 11:23:10 AM11/7/11
to d3-js
Lars,

you are right.

That can be a good idea... but My script is massive and I need to find
a way to make it wait by javascript or ajax or D3 API

My future plan is to show like "Graph Loading" in flash or GIF style

I can not use in this way.

cheers

-Anil

Lars Kotthoff

unread,
Nov 7, 2011, 11:33:58 AM11/7/11
to d3...@googlegroups.com, anilth...@gmail.com
> That can be a good idea... but My script is massive and I need to find
> a way to make it wait by javascript or ajax or D3 API

You can't really make it wait, you can only simulate that by setting a timer to
call a function. Unless you wait actively by checking e.g. a variable in a loop.
I wouldn't recommend that though as it puts heavy load on the CPU.

> My future plan is to show like "Graph Loading" in flash or GIF style
> I can not use in this way.

You certainly could. I've done this here for example:
http://www.larsko.org/v/mpte/

Lars

ani

unread,
Nov 7, 2011, 11:40:20 AM11/7/11
to d3-js
Yeah Lars,

You are right... I can set time out..

But this script is a part of web server and will run on several
different computers so I cant set specific time

And

Thanks for the Loading.. thing I will use the way u used it.

Mike Bostock

unread,
Nov 7, 2011, 11:37:25 AM11/7/11
to d3...@googlegroups.com
You can use the technique that Lars described to display a temporary
loading screen:

function init() {
showLoadingScreen();
d3.json("path/to/file.json", function(data) {
hideLoadingScreen();
displayTheData();
});
}

These are asynchronous callbacks; you wait for them to complete
(synchronize) by putting your code inside the callback.

Mike

Lars Kotthoff

unread,
Nov 7, 2011, 12:34:20 PM11/7/11
to d3...@googlegroups.com, anilth...@gmail.com
> But this script is a part of web server and will run on several
> different computers so I cant set specific time

The timeout you set only applies to the computer that the javascript is executed
on. You would have to do something like

function waitFor(m, f) {
if(m > 0) {
// check again in 1 second
setTimeout(function() { waitFor(m, f); }, 1000);
} else {
f();
}
}

var mutex = 1; // asynchronous function call sets mutex to 0 at some point

waitFor(mutex, otherFunction());

In any case you would have to wrap the call to otherFunction() so that it gets
called at the appropriate time.

Lars

Reply all
Reply to author
Forward
0 new messages