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对象。

我感到茫然，非常感谢能提供任何帮助！

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

非常感谢任何建议。

Answer 1

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

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

在身体的底部将解决这个问题。

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

1 个答案: