javascript - 从匿名函数内部设置 d3 图

Question

我正在尝试读取一个 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>

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