D3.js 树形图可视化的 JSON 耀斑输入结构答案

【问题标题】：Structure of the JSON flare input for D3.js Treemap VisualizationD3.js 树形图可视化的 JSON 耀斑输入结构
【发布时间】：2014-11-16 18:44:24
【问题描述】：

我目前正在处理 D3.js 的 Treemap 可视化，并希望了解示例中使用的flare.json 是如何组织的。 json 输入文件的格式是否需要与示例中使用的结构完全相同。我有一个来自网络爬虫的输入文件，其中包含 URL 列表及其各自的父 URL。我尝试使用类似以下的方法，但它不起作用，并且不确定是结构不同还是其他原因。

listURLs.json：

{
 "name": "flare",
 "children": [
    {"children":"http:\/\/a.wholelottanothing.org","name":"http:\/\/buzz.blogger.com"},              
    {"children":"http:\/\/www.bitworking.org","name":"http:\/\/buzz.blogger.com"},   
    {"children":"http:\/\/blog.computationalcomplexity.org","name":"http:\/\/buzz.blogger.com"},  
    {"children":"http:\/\/www.blogactionday.org","name":"http:\/\/buzz.blogger.com"}, 
    {"children":"http:\/\/www.wikipaintings.org","name":"http:\/\/littlegreeniguana.blogspot.com"}
    ]
}

我知道这看起来与示例中使用的flare.json 非常不同，但这可以工作吗？此外，我使用的输入不包括“大小”参数，这也可能是输出为空白的原因。我如何在这里使用大小？可以在后面的代码中动态调整吗？任何帮助将不胜感激，我是 D3 新手！

【问题讨论】：

这个answer 在我遇到类似问题时提供了帮助。

标签： javascript json d3.js treemap

【解决方案1】：

树、包和其他 D3 分层布局所期望的分层数据格式期望“子项”是对象数组，并遍历该分层数据以准备格式化对象以使用布局显示。因此，您不想使用“子”来存储单个链接，而是希望它存储一个对象数组，该数组的格式与父对象一样（即使该数组中只有一个东西）。有点难以掌握您要在数据集中显示的内容，但我猜所有这些网站都在buzz.blogger.com 下，除了最后一个，在这种情况下，格式正确的分层数据看起来像这样（注意一切都嵌套在根节点中，您可以随意命名）：

{
 "name": "root node",
 "children": [
  {"name":"http:\/\/buzz.blogger.com", "children": [
   {"name": "http:\/\/www.bitworking.org"},
   {"name": "http:\/\/blog.computationalcomplexity.org"},
   {"name": "http:\/\/www.blogactionday.org"}
   ]
  },
  {"name":"http:\/\/littlegreeniguana.blogspot.com", "children": [
   {"name": "http:\/\/www.wikipaintings.org"}
   ]
  }
 ]
}

【讨论】：