d3.js flare.json使用我创建的Json w /可折叠树 [英] d3.js flare.json using my created Json w/ collapsible tree

问题描述

我创建了自己的Json文件以与d3中的可折叠树配合使用。我在每个孩子的文件中有三个额外的字段。我为一个有三个孩子的根节点创建了一个。每个孩子都有叶子，并在那里结束，所以共有三个级别。

I created my own Json file to use with the collapsible tree in d3. I have three extra fields in the file for each child. I created one for one root node that has three children. Each of those children have leaves, and ends there, so a total of three levels.

我被困住，因为能够加载json。我已经运行的代码与原来的flare.json，所以其他都工作。我有同样的json粘贴下面。谢谢！

I am stuck as being able to load the json. I have ran the code with the original flare.json, so all else is working. I have the same json pasted below. Thank you!

更新：我能够通过将json复制/粘贴到html中来创建一个变量来处理这个问题：如何加载数据从一个内部的JSON数组，而不是一个外部资源/文件为一个可折叠树在d3.js？它的工作，虽然不理想，因为我有一个大的json列表。

UPDATE: I was able to deal with this by copy/pasting the json into the html to create a variable as in this question: How to load data from an internal JSON array rather than from an external resource / file for a collapsible tree in d3.js? It works, though not ideal as I have a large json list.

这里是我的html代码的pastebin链接： http://pastebin.com/njdfrwhf 谢谢！

Here is a pastebin link of my html code: http://pastebin.com/njdfrwhf Thanks!

  {
"name": "checkD",
"children": [
     {
     "name": "XX.YY.IP1",
     "children": [
      {"name": "xxx.yyy.1", "distance": 1, "CC": "US", "m":0},
      {"name": "xxx.yyy.2", "distance": 1.8, "CC": "US", "m":0},
      {"name": "xxx.yyy.3", "distance": 4.5, "CC": "US", "m":0},
      {"name": "xxx.yyy.4", "distance": 2.5, "CC": "US", "m":0},
      {"name": "xxx.yyy.5", "distance": 1, "CC": "US", "m":0},
      {"name": "xxx.yyy.6", "distance": 2, "CC": "US", "m":0},
      {"name": "xxx.yyy.7", "distance": 1, "CC": "US", "m":0},
      {"name": "xxx.yyy.8", "distance": 3, "CC": "US", "m":1},
      {"name": "xxx.yyy.9", "distance": 1, "CC": "US", "m":1},
      {"name": "xxx.yyy.10", "distance": 5, "CC": "US", "m":1}
      ]
    },
     {
     "name": "XX.YY.IP2",
     "children": [
      {"name": "xxx.yyy.1", "distance": 1, "CC": "US", "m":0},
      {"name": "xxx.yyy.2", "distance": 1.8, "CC": "US", "m":1},
      {"name": "xxx.yyy.3", "distance": 2, "CC": "US", "m":1},
      {"name": "xxx.yyy.4", "distance": 4.3, "CC": "US", "m":1},
      {"name": "xxx.yyy.5", "distance": 5, "CC": "US", "m":0},
      {"name": "xxx.yyy.6", "distance": 2, "CC": "US", "m":0},
      {"name": "xxx.yyy.7", "distance": 1.3, "CC": "US", "m":0},
      {"name": "xxx.yyy.8", "distance": 3, "CC": "US", "m":1},
      {"name": "xxx.yyy.9", "distance": 4, "CC": "US", "m":1},
      {"name": "xxx.yyy.10", "distance": .5, "CC": "US", "m":1}
      ]
     },
     {
     "name": "XX.YY.IP3",
     "children": [
      {"name": "xxx.yyy.1", "distance": 1, "CC": "US", "m":0},
      {"name": "xxx.yyy.2", "distance": 1.8, "CC": "US", "m":0},
      {"name": "xxx.yyy.3", "distance": 2, "CC": "US", "m":0},
      {"name": "xxx.yyy.4", "distance": 4.3, "CC": "US", "m":0},
      {"name": "xxx.yyy.5", "distance": 5, "CC": "US", "m":0},
      {"name": "xxx.yyy.6", "distance": 2, "CC": "US", "m":0},
      {"name": "xxx.yyy.7", "distance": 1.3, "CC": "US", "m":0},
      {"name": "xxx.yyy.8", "distance": 3, "CC": "US", "m":0},
      {"name": "xxx.yyy.9", "distance": 4, "CC": "US", "m":0},
      {"name": "xxx.yyy.10", "distance": .5, "CC": "US", "m":0}
      ]
     }
 ]
}

推荐答案

当使用d3.json加载文件时，它使用http请求。如果文件是本地文件，大多数新式浏览器将拒绝GET文件，因为这将是浏览器用户的安全风险（GET c：\allmypasswords.txt）

When you load a file with d3.json, it uses an http request. If the file is local, most modern browsers will refuse to GET the file, because that would be a security risk to users of their browsers (GET c:\allmypasswords.txt)

Firefox允许从本地运行HTML请求本地文件，因此您可以尝试在那里运行代码。替代方法是通过托管在网络上或者在本地运行服务器，通过服务器提供JSON文件。

Firefox is more permissive with requesting local files from locally run HTML, so you can try running your code there. The alternative is to serve the JSON file with a server, either by hosting it on the web or running a server locally.

编辑问题其实是JSON。您有两个包含前导小数的值。当我在小数前添加一个0时，它工作。很奇怪。

EDIT It seems the issue is actually the JSON. You have two values that contain leading decimals. When I added a 0 in front of the decimal it worked. Weird.

这篇关于d3.js flare.json使用我创建的Json w /可折叠树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！