使用JSON文件進行氣泡顯示

我是D3的全新人員。使用JSON文件進行氣泡顯示

我想查看氣泡測試的簡單結果，例如名稱：數學，完成測試：340，名稱：拉丁語，完成測試：550.

當我看看https://bl.ocks.org/mbostock/4063269的例子，我可以看到只有一個CSV文件被加載。

根據文檔也可以加載JSON文件，但是我沒有找到JSON文件的正確「語義」。

JSON文件應該是什麼樣子，以及如何在index.html的JavaScript部分調用它？

注意：我想使用4.0版本。有關係嗎？

來源

2017-06-17 user3296316

D3是**不是**框架。我相應地編輯了你的問題。 –

你這裏的問題不是關於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選擇中對博斯托克的代碼進行一些更改。

來源

2017-06-17 23:36:27

感謝您的幫助:-)當我想要不同顏色的氣泡時，我只需要編輯該ID，對不對？我將它們編輯爲「flare.AgglomerativeCluster.AgglomerativeCluster」，「flare.CommunityStructure.CommunityStructure」。這是正確的方式還是應該有更好的方法？ – user3296316

這取決於你想如何給它們着色。在Bostock的代碼中，它是包名的序號。 –

使用JSON文件進行氣泡顯示

回答

相關問題