从匿名函数内部设置 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);

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

setting d3 graph from inside of an anonymous function

javascript

d3.js

dagre-d3