Einstellung d3 Graph aus dem Inneren einer anonymen Funktion

Question

Ich versuche, eine JSON-Datei zu lesen, die wie folgt aussieht:

[ { 
"parent" : "cmeta_transform", 
"path" : "hcat://sample/dt=yyyyMMddHH", 
"child" : "lite_video_hourly" 
} ] 

Dann habe ich über den Inhalt am iterieren und den Knoten und Kanten aus dem Inneren der data.forEach Funktionseinstellung Anruf (Code unten)

Aber es scheint wie die Variable g wird nicht gesetzt, wenn ich über es iterieren. Wenn ich es außerhalb der anonymen Funktion mache, funktioniert es. Was fehlt mir?

<script id="js"> 
// Create a new directed graph 
var g = new dagreD3.graphlib.Graph().setGraph({}); 

d3.json("expectedOutput.json", function(data) { 
    data.forEach(function (job) { 
     console.log(job); // I do see job values correctly. 
     g.setNode(job.child, { label: job.child }); 
     g.setEdge(job.parent,  job.child,  { label: job.path }); 
    }); 
}); 

console.log(g); // g doesn't have the nodes & edges values set above 

// if I do this 
g.setNode(job.child, { label: job.child }); 
g.setEdge(job.parent,  job.child,  { label: job.path }); 
console.log(g); // I see g is set properly 
</script> 

Answer 1

Dies geschieht, weil über AJAX die JSON anfordernden eine asynchrone Operation ist, so dass die console.log bevor ausgeführt wird, was in der anonymen Funktion ist.

Sie können sich promises in JavaScript ansehen oder zumindest Ihren Code in diese Funktion einfügen, damit das Ergebnis der Anfrage für Ihren Code verfügbar ist. Auf der einfachsten Ebene sollte dies funktionieren:

function draw(data) { 
    var g = new dagreD3.graphlib.Graph().setGraph({}); 
    data.forEach(function (job) { 
     console.log(job); // I do see job values correctly. 
     g.setNode(job.child, { label: job.child }); 
     g.setEdge(job.parent,  job.child,  { label: job.path }); 
    }); 
    // carry on doing what you need in here... 
} 

d3.json("expectedOutput.json", draw);