0

我正在尝试读取一个如下所示的 JSON 文件：

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

然后，我正在迭代内容并从data.forEach函数调用内部设置节点和边缘（下面的代码）

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>
4

1 回答 1

1

发生这种情况是因为通过 AJAX 请求 JSON 是异步操作，因此console.log在匿名函数内部执行之前执行。

您可能希望查看JavaScript中的 Promise，或者至少将您的代码放在该函数中，以便您的代码可以使用请求的结果。在最简单的层面上，这应该可以工作：

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);
于 2017-07-05T18:47:00.297 回答