javascript - 使用自己的数据运行 D3.js 示例不起作用

Question

我想从 D3.js 库构建以下图表：

https://observablehq.com/@pydanny/bjj-standing-flow-1

现在我想从我的数据库中获取图形的数据并将其放入 JSON 文件中（我这样做了）。JSON 文件的内容应传递给图表。这是将数据传递给图形的原始代码：

main.variable(observer()).define(["dot"], function(dot){
    return (
          dot` digraph G {
              node [shape=box];
              Mount [color = red]  SideMount [color = red]  Gaurd [color = red]  NorthSouth [color = red] Standing [color = red];
              Standing -> SnapDown;
              SnapDown -> OsotoGeri [style=dashed];
              SnapDown -> SideClinch [style=dashed];
         }`
      )
   });

我已将其更改（从 json 文件传递​​数据）如下：

  main.variable(observer()).define(["dot"], function(dot){
    return (d3.json("data.json").then(function (data){
          var result = data;
          var arrayLength = result.edges.length;
          var resultDataString = dot + "digraph G{ \n";
          resultDataString = resultDataString + "node [shape=box] \n";
          resultDataString = resultDataString + "Mount [color = red]  SideMount [color = red]  Gaurd [color = red]  NorthSouth [color = red] Standing [color = red]; \n";
          for (var i = 0; i < arrayLength; i++) {
            var arr = result.edges[i];
            resultDataString =  resultDataString + " " + arr[0] + " -> " + arr[1] + " ;\n ";
          }
          resultDataString = resultDataString + " }";
          return resultDataString;
        })
    )

});

JSON文件的内容：

{
  "edges": [
    [
      "Burpee With Push Up",
      "Push Up"
    ],
    [
      "Burpee With Push Up",
      "Squat Jump"
    ],
    [
      "Squat Jump",
      "Squat"
    ],
    [
      "Squat Jump",
      "Two Footed Jump"
    ],
    [
      "Two Footed Jump",
      "Stand"
    ],
    [
      "Push Up",
      "Plank"
    ],
    [
      "Plank",
      "Lay"
    ]
  ]
}

我阅读了 JSON 文件的内容，将其转换为给定的格式并返回。但我没有得到图表，只有这个：

谁能告诉我我的错误是什么？

标签： javascriptjsond3.jsobservablegraphviz