JSONファイルを使った気泡の可視化

Question

私はD3にとって全く新しいです。

簡単なテスト結果を気泡で視覚化したいと思います。名前：数学、完成テスト：340、名前：ラテン、完成テスト：550.

https://bl.ocks.org/mbostock/4063269の例を見ると、CSVファイルのみが読み込まれていることがわかります。

ドキュメントによると、JSONファイルを読み込むこともできますが、JSONファイルに正しい意味論が見つかりませんでした。

index.htmlのJavaScriptセクションでJSONファイルの外観と呼び出し方法を教えてください。

注：バージョン4.0を使用します。それは問題ですか？何正しい構造がないので、ここで

Answer 1

あなたの質問は、JSONファイルの正しい構造に関するものではありません：それは、コードに依存します。

特定のコードをリンクした場合、どのようにJSONのCSVを変更できますか？

これに答えるには、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...] 

... Bostockのコードでは、d3.hierarchyとnodeの両方のコードをいくつか変更する必要があります。