javascript - D3.js 树状图可视化的 JSON Flare 输入的结构

Question

我目前正在与 Treemap 合作D3.js 的可视化，希望了解示例中使用的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 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"}
   ]
  }
 ]
}