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

从匿名函数内部设置d3图形

1 个答案: