javascript - 使用 JSON 文件进行气泡可视化

Question

我是 D3 的新手。

我想直观地看到气泡中测试的简单结果，例如姓名:数学，已完成测试:340，姓名:拉丁语，已完成测试:550。

当我查看 https://bl.ocks.org/mbostock/4063269 上的示例时，我可以看到只加载了一个 CSV 文件。

根据文档，也可以加载 JSON 文件，但我没有找到 JSON 文件的正确“语义”。

JSON 文件应该是什么样子以及如何在 index.html 的 JavaScript 部分中调用它？

注意:我想使用 4.0 版本。这有关系吗？

Answer 1

您的问题与 JSON 文件的正确结构无关，因为不存在正确的结构:这取决于代码。

您的问题是，鉴于您链接的特定代码，如何将 CSV 更改为 JSON。

要回答这个问题，您必须了解 d3.csv 如何创建对象数组。在您链接的 Bostock 代码中，该数组中的每个对象都有一个 id 和一个 value 键/值对。

因此，您的 JSON 需要具有如下结构:

[{
    "id": "flare.analytics.cluster.AgglomerativeCluster",
    "value": 1938
}, {
    "id": "flare.analytics.cluster.CommunityStructure",
    "value": 3812
}, {
    "id": "flare.analytics.cluster.HierarchicalCluster",
    "value": 2714
}, {
    "id": "flare.analytics.cluster.MergeEdge",
    "value": 1743
}]

由于您正在创建自己的 JSON，因此无需担心行函数，该函数会删除没有 value 的对象并将其值强制转换为数字。

这是使用 JSON 文件更新的 bl.ocks(仅包含一些对象):https://bl.ocks.org/anonymous/4ca57ea4393a37bc92091325eba295dd

请记住，如果您使用问题中描述的数据结构......

[{"Name": "mathematics", "completed-tests": 340}, etc...]

...您必须在 d3.hierarchy 和 node 选择中对 Bostock 的代码进行多项更改。