Verwenden von Javascript-Array zum Erstellen eines Blasendiagramms (D3js)

Question

Ich versuche, das D3js Bubble-Chart-Beispiel (https://bl.ocks.org/mbostock/4063269) zu verwenden, jedoch basiert das Beispiel auf der Verwendung einer CSV-Datei für die Daten.

Wie würde ich das Beispiel ändern, um ein JavaScript-Array anstelle der CSV-Datei zu verwenden?

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

Answer 1

Im CSV Beispiel mit Ihnen verbinden, wird ein Teil des Codes innerhalb der Callback-Funktion der Funktion d3.csv durchgeführt. Mit anderen Worten, wir müssen warten, bis die Daten geladen sind, um sie zu verwenden.

Wenn Sie die Daten jedoch bereits in einem Array haben, können Sie sie sofort verwenden. Ich habe unter dem Anfang des Programms (Hinweis: nicht abgeschlossen) gezeigt:

/* 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