Javascript配列を使用してバブルチャートを作成する（D3js）

Question

D3jsバブルチャートの例（https://bl.ocks.org/mbostock/4063269）を使用しようとしていますが、この例ではデータにCSVファイルを使用しています。

CSVファイルの代わりにJavaScript配列を使用するように例を変更するにはどうすればよいですか？あなたがにリンクCSVの例では

d3.csv("flare.csv", function(d) { 

Answer 1

、コードの一部がd3.csv機能のコールバック関数内で行われます。つまり、データを使用するためにデータがロードされるまで待つ必要があります。

ただし、既にデータを配列に格納している場合は、すぐに使用できます。私はプログラムの開始の下に示しました（注：完了していません）。

/* The data doesn't have to be loaded and can be used immediately */ 
var classes = [ 
    { id: 'flare', value: 0 }, 
    { id: 'flare.analytics', value: 0 }, 
    { id: 'flare.analytics.cluster', value: 0 }, 
    { id: 'flare.analytics.cluster.AgglomerativeCluster', value: 3938 }, 
    { id: 'flare.analytics.cluster.CommunityStructure', 3812 }, 
    { id: 'flare.analytics.cluster.HierarchicalCluster', 6714 }, 
    { id: 'flare.analytics.cluster.MergeEdge', 743 } 
]; 

var svg = d3.select("svg"), 
    width = +svg.attr("width"), 
    height = +svg.attr("height"); 

var format = d3.format(",d"); 

var color = d3.scaleOrdinal(d3.schemeCategory20c); 

var pack = d3.pack() 
    .size([width, height]) 
    .padding(1.5); 

/* 
    This code was inside the d3.csv() callback in the original example, 
    because we had to wait for the data to be loaded from the csv 
    to become available. 

    But as we already have the data in memory in the array, 
    it can be executed immediately (see the classes array 
    being used). 
*/ 
var root = d3.hierarchy({ children: classes }) 
    .sum(function(d) { return d.value; }) 
    .each(function(d) { 
     if (id = d.data.id) { 
      var id, i = id.lastIndexOf("."); 
      d.id = id; 
      d.package = id.slice(0, i); 
      d.class = id.slice(i + 1); 
     } 
    }); 

//Carry on with rest of script as per the blocks example