匿名函數

Question

我想讀一個JSON文件，它看起來像內部設置D3圖表從（下面的代碼）

但是，似乎變量g沒有得到設置時，我迭代它。如果我在匿名函數之外進行操作，它就會起作用。 我錯過了什麼？

<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

這是因爲要求通過AJAX JSON是一個異步操作，因此console.log之前匿名函數裏面有什麼執行。

您可能需要查看promises in JavaScript或至少將您的代碼放在該函數中，以便您的代碼可以使用該請求的結果。在最簡單的級別上，這應該起作用：

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);