Question

我想制作气泡图（http://bl.ocks.org/mbostock/4063269），但我看到数据是在json中

我有这个数据（没有json）

 78 FFASQ
 73 AABB
 42 ACD
 30 KKLPDS
 16 TRI
 10 AFVA
 10 VASDABBB
  8 EC
  6 VDRREWSTW
  4 WERETRT

第一列大小

第二栏，名称

我尝试替换index.html中的数据，但没有工作。

我该怎么做？

我有想法将我的数据转换为json，但不知道。

非常感谢。

Answer 1

主要原因不仅仅是因为源数据不是json格式，您可以加载csv，tsv，xml格式的数据。如果您仔细查看示例bl.ocks，您会看到源数据flare.json具有以下结构：

{
 "name": "graph",
 "children": [
  {"name": "BetweennessCentrality", "size": 3534},
  {"name": "LinkDistance", "size": 5731},
  {"name": "MaxFlowMinCut", "size": 7840},
  {"name": "ShortestPaths", "size": 5914},
  {"name": "SpanningTree", "size": 3416}
 ]
}

因为此演示使用的是“层次结构”＆＃39; layout - d3.layout.pack()，适用于具有层次结构的数据集。但在您的描述中，数据似乎不是一个层次结构。

我建议您考虑使用不同的图表类型，例如散点图，或者如果您可以更新数据结构，则可以使用其他形式的层次结构布局，例如treemap，sunburst等

Answer 2

我建议你制作一个包含两列（大小和名称）的csv文件。您可以轻松地使用csv文件替换示例代码行：

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

就像这样：

d3.csv("yourcsvfile.csv", function(error, data)

我认为这个例子可以帮助http://jrue.github.io/coding/2014/exercises/basicbubblepackchart/

气泡图 - d3js＆amp; json（2列数据）

2 个答案: