气泡图 - d3js 和 json（2 列数据）答案

【问题标题】：Bubble Chart - d3js & json (data with 2 columns)气泡图 - d3js 和 json（2 列数据）
【发布时间】：2016-01-15 02:44:58
【问题描述】：

我使用 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 的想法，但不知道。

非常感谢。

【问题讨论】：

标签： json d3.js

【解决方案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/

【讨论】：

我试过了，效果很好。谢谢！现在唯一剩下的就是看看如何将文本转换为 CSV 格式，但这是另一个话题。
您是否搜索了将 txt 转换为 csv 的工具？也许你可以使用 Python
是的，我已经搜索过，但没有发现任何适合我的方法。也许是我对 Linux 和编程的一点了解。
尝试再问一个问题

【解决方案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 等。

【讨论】：

谢谢！它对概念有很大帮助:)