气泡图-d3js&json(包含2列的数据)

Question

我使用d3js(https://d3js.org/)

我想做一个气泡图(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

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

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

像这样：

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

我认为这个例子对你有帮助吗http://jrue.github.io/coding/2014/exercises/basicbubblepackchart/

Answer 2

主要原因不仅是源数据不是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}
 ]
}

因为这个演示使用了"层次结构"布局d3.layout.pack()，它适用于具有层次结构的数据集。但在你的描述中，数据似乎不是一个层次结构。

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