使用D3 Zoomable Tree Map Code作为模板

Question

Somewhat related stack overflow question about loading json without http request in D3

我刚刚开始学习javascript，但我可能会雄心勃勃地认为我可以从这个very cool zoomable treemap by Mike Bostock获取代码，硬编码我自己的json而不是使用d3.json，并轻松拥有树形图反映我的新数据。作为一种做法，我已经插入了试验json，我知道应该使用上面引用的堆栈溢出问题推荐的方法正确格式化。代码的替换部分如下所示：

var root = {"name": "flare","children": [{"name": "analytics","children": [{"name": "cluster","children": [{"name": "MergeEdge", "size": 10 }]}]}]};

function(root) {

initialize(root);
accumulate(root);
layout(root);
display(root);

它最初看起来像这样，在我删除的脚本末尾有一个右括号：

d3.json("flare.json", function(root) {

  initialize(root);
  accumulate(root);
  layout(root);
  display(root);

但是当我在浏览器中打开html文件时，我只得到一个空的灰色框而不是树形图。我意识到我正在制造某种非常基本的错误，我甚至无法弄清楚它是什么。在我了解有关d3 / javascript的更多信息之前，我的“模板”方法是否会注定失败，或者是否有一个简单的解决方案？

Answer 1

这可能不是您问题的完整解决方案，但至少您需要使用JSON.parse（JSON_STRING_HERE）而不是直接使用字符串。