Laden von JSON-Daten in ein Array in d3

Question

, also versuche ich JSON-Daten zu einer Array-Variable in d3 zuzuweisen.

Hier ist meine json:

[ 
{ 
    "Impressions": "273909", 
    "Clicks": "648", 
    "CPM": 4.6388278388278, 
    "Cost": 1266.4, 
    "CPC": 1.9543209876543, 
    "Campaign": "Campaign 1" 
}, 
{ 
    "Impressions": "974408", 
    "Clicks": "14571", 
    "CPM": 4.0175975359343, 
    "Cost": 3913.14, 
    "CPC": 0.26855672225654, 
    "Campaign": "Campaign 2" 
}, 
{ 
    "Impressions": "76751", 
    "Clicks": "5022", 
    "CPM": 8.4675, 
    "Cost": 643.53, 
    "CPC": 0.1281421744325, 
    "Campaign": "Campaign 3" 
}, 

und hier ist mein Code die json-Datensatz zu laden:

d3.json("DS003a_Adwords_AdPerformance_modified.json", function(error, data) { 



var topData = data.sort(function(a, b){ 
    return d3.descending(+a.cost, +b.cost); 
}).slice(0,10); 

topData.forEach(function (d) { 
    d.CampaignName = d.Campaign; 
    d.cost = d.Cost; 
}); 

var cost = d3.nest() 
      .key(function(d) {return d.Cost;}) 
      .entries(data); //fail 


var p = d3.select("body").selectAll("p") 
    .data(topData) 
    .enter() 
    .append("p") 
    .text(function(d,i){ 
    return (i+1) + ". " + d.CampaignName + " cost = " + cost[i]; 
    }); 

ich grundsätzlich den Wert von "Kosten" einer Array-Variablen speichern var cost wollen . Aber wenn ich meinen Code versucht, das Ergebnis ist wie folgt:

Was soll ich tun?

Vielen Dank, Ihre Hilfe geschätzt :)

Answer 1

Sie nicht nest direkt ein Array von Werten verwenden können, haben. Die beiden möglichen Ausgabeformate des Nestes sind:

• ein großes Objekt

  { 
  key1: value1, 
  key2: value2, 
  ... 
  } 
  

• oder ein Array von kleinen Objekten

  [ 
  { key: key1, values: value1 }, 
  { key: key2, values: value2 }, 
  ... 
  ] 
  

Weder ist diejenige, die Sie wünschen. (Denken Sie an das erste Ziel von nest: Identifizieren Sie eine Gruppe von Schlüsseln und gruppieren Sie alle Daten mit demselben Schlüssel in einem einzigen Stapel, möglicherweise mit einer Transformation).

Wenn aus irgendeinem Grund Sie nicht wollen, Ihre Original-Array verwenden, wie in den Kommentaren vorgeschlagen, dann ist d3.map, was Sie benötigen:

var cost = d3.map(data, function(d) { 
    return d.cost; 
}); 

Dies ist eine Kopie der Kostendaten zu schaffen (Wenn sich Ihr Datenfeld ändert, müssen Sie erneut d3.map ausführen, um Ihr Array zu aktualisieren. Daher sollten Sie dieses Array nur lokal verwenden, wenn Ihre Daten möglicherweise nicht konstant sind. Aus diesem Grund wird es im Allgemeinen bevorzugt, die Originaldaten direkt zu verwenden, da dies auch diesen Kopierschritt speichert und später weniger Risiken für knifflige Fehler birgt.