无法将 D3 转换为使用本地数据而不是远程数据

Question

我有一个使用远程数据的页面运行良好here。

这使用以下代码加载 JSON:

treeJSON = d3.json("./data/data.json", function(error, treeData) {
   ...
   // Append a group which holds all nodes and which the zoom Listener can act upon.
   var svgGroup = baseSvg.append("g");

   // Define the root
   root = treeData;
   root.x0 = viewerHeight / 2;
   root.y0 = 0-(viewerWidth / 2) + 50;

   // Layout the tree initially and center on the root node.
   collapse(root);
   update(root);
   centerNode(root);
});

网上的以下信息我把第一行改成了：

var myJSON = '{"name":"All patients","size":100,"colour":"#70AD47","children":[{"name":"Operable","size":33,"colour":"#C55A11","children":[{"name":"Stage IV","size":28,"children":[{"name":"Debulking: None","size":14},{"name":"Debulking: ≤1","size":8},{"name":"Debulking: > 1","size":6}]},{"name":"Stage IIIb/c","size":5,"children":[{"name":"Debulking: None","size":2},{"name":"Debulking: ≤1","size":1},{"name":"Debulking: > 1","size":2}]}]},{"name":"Potentially operable","size":44,"colour":"#1F4E79","children":[{"name":"Stage IV","size":36,"children":[{"name":"Becoming inoperable","size":5},{"name":"Debulking: None","size":12},{"name":"Debulking: ≤1","size":11},{"name":"Debulking: > 1","size":8}]},{"name":"Stage IIIb/c","size":8,"children":[{"name":"Becoming inoperable","size":2},{"name":"Debulking: None","size":2},{"name":"Debulking: ≤1","size":2},{"name":"Debulking: > 1","size":2}]}]},{"name":"Inoperable","size":23,"colour":"#7F7F7F","children":[{"name":"Stage IV","size":16},{"name":"Stage IIIb/c","size":7}]}]}';
var treeData = JSON.parse(myJSON);

我也删除了最后一行。

我的问题是屏幕上什么也没有出现。控制台日志显示正确创建了 treeData 对象。

我很茫然，如果能提供任何帮助，我将不胜感激！

代码很长，所以不适合放在这里post，但是如果有人不介意看看他们是否能解决问题，可以下载文件here这包含两个版本 - 工作远程数据（树文件夹）和损坏的本地数据损坏（localtree 文件夹）

非常感谢任何建议。

Answer 1

这可能是因为您的 bubbles.js 在页面呈现之前是运行。您的脚本找不到 #tree-container。把你的

<script src="bubbles.js"></script>

正文底部会解决这个问题。

无法将 D3 转换为使用本地数据而不是远程数据

Can't convert D3 to use local data instead of remote

json

local

d3.js