Question

我对HTML和JavaScript非常愚蠢，所以请原谅任何愚蠢。

我正在使用D3 Tree Diagram，但是我需要加载一个JSON文件，而不是在JS脚本中编写它，用户将在select标签中选择要加载的文件的名称。这是D3 code

首先，我如何加载/读取JSON文件，比如exampleNodes.json，

然后，我如何传递所选select标记的名称，以便它读取相应的JSON？

感谢您的耐心和帮助。谢谢。

Answer 1

代码

var treeData = [
  {
    "name": "Top Level",
    "parent": "null",
    "children": [
      {
        "name": "Level 2: A",
        "parent": "Top Level",
        "children": [
         {
        "name": "Son of A",
        "parent": "Level 2: A"
      },
      {
        "name": "Daughter of A",
        "parent": "Level 2: A"
      }
    ]
  },
  {
    "name": "Level 2: B",
    "parent": "Top Level"
  }
]
  }
];

你必须将它保存在data.json文件中，如

{ 
  "treeData" : [ ... your data array ...]

}

之后在d3.json（）函数中，您将收到此对象

d3.json("data.json",function(json){

        // do your coding 
       // or  all code put inside one function and call it after data loaded  
});

如果您使用的是谷歌浏览器，那么从json读取数据时会出现错误，因为安全性Google Chrome不允许从文件系统读取文件，您可以在Firefox中获取数据。使它运行上传你的代码在一些本地服务器上。即在WampServer或Apache tomcat等中。

如何在Tree Diagram中将JSON加载到D3

1 个答案: