d3 Daten aus einer Datei lesen statt hart in ein Programm codieren

Question

Nun, ich benutze derzeit Dimple, die eine Art D3 für Dummies ist.

Ich habe meine Daten wie so angeordnet:

var data = [ 
      { "Location": "Farringdon", "Jobs": 1 }, 
      { "Location": "Horsforth", "Jobs": 1 }, 
      { "Location": "Old Bailey", "Jobs": 1 }, 
      { "Location": "Caversham", "Jobs": 1 }, 
      { "Location": "Newton Heath", "Jobs": 1 }, 
      { "Location": "Hardham", "Jobs": 1 }, 
      { "Location": "Boscombe", "Jobs": 1 }, 
      { "Location": "Kings Worthy", "Jobs": 1 }, 
      { "Location": "Caversham", "Jobs": 1 }, 
      { "Location": "Lee", "Jobs": 3 }, 
      { "Location": "Wrexham", "Jobs": 1 }, 
      { "Location": "Woolstone", "Jobs": 2 }, 
      { "Location": "Seacombe", "Jobs": 1 }, 
      { "Location": "Painswick", "Jobs": 1 }, 
      { "Location": "Northwich", "Jobs": 1 }, 
      { "Location": "Royal Leamington Spa", "Jobs": 2 }, 
      { "Location": "Latchford", "Jobs": 1 }, 
      { "Location": "Holborn", "Jobs": 1 }, 
      { "Location": "Elton", "Jobs": 1 } 
     ]; 

Aber es lebt wirklich in this dataset, die viel größer ist und sieht wie folgt aus:

Location,Jobs 
Farringdon,1 
Horsforth,1 
Old Bailey,1 
Caversham,1 
Newton Heath,1 
Hardham,1 
Boscombe,1 
Kings Worthy,1 
Caversham,1 
Lee,3 
... 

, was das Beste ist (dh die Gleichgewicht der Leichtigkeit und Wartbarkeit) Weg, um diese Daten in das Programm in einer Art dynamischen Weg hinzuzufügen, anstatt hart codieren, wie ich es getan habe.

---

ANWENDUNG

ich zur Zeit bin mit ihm (Versuch), ein einfaches Balkendiagramm erzeugen:

<div id="chartContainer"> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="http://dimplejs.org/dist/dimple.v1.1.1.min.js"></script> 
</div> 

<script> 
var svg = dimple.newSvg("#chartContainer", 1000, 1000); 
var data = [ 
      { "Location": "Farringdon", "Jobs": 1 }, 
      { "Location": "Horsforth", "Jobs": 1 }, 
      { "Location": "Old Bailey", "Jobs": 1 }, 
      { "Location": "Caversham", "Jobs": 1 }, 
      { "Location": "Newton Heath", "Jobs": 1 }, 
      { "Location": "Hardham", "Jobs": 1 }, 
      { "Location": "Boscombe", "Jobs": 1 }, 
      { "Location": "Kings Worthy", "Jobs": 1 }, 
      { "Location": "Caversham", "Jobs": 1 }, 
      { "Location": "Lee", "Jobs": 3 }, 
      { "Location": "Wrexham", "Jobs": 1 }, 
      { "Location": "Woolstone", "Jobs": 2 }, 
      { "Location": "Seacombe", "Jobs": 1 }, 
      { "Location": "Painswick", "Jobs": 1 }, 
      { "Location": "Northwich", "Jobs": 1 }, 
      { "Location": "Royal Leamington Spa", "Jobs": 2 }, 
      { "Location": "Latchford", "Jobs": 1 }, 
      { "Location": "Holborn", "Jobs": 1 }, 
      { "Location": "Elton", "Jobs": 1 } 
     ]; 
var chart = new dimple.chart(svg,data); 
chart.setBounds(100, 100, 500, 300); 
var x = chart.addCategoryAxis("x", "Location"); 
var y = chart.addMeasureAxis("y", "Jobs"); 



var lines = chart.addSeries(["project"], dimple.bar, [x, y]); 

lines.data = data; 
lines.lineWeight = 5; 
lines.lineMarkers = true; 

chart.draw(); 

</script> 

Answer 1

Wenn die Datei im selben ist Verzeichnis verwenden Sie einfach die folgende D3-Methode:

d3.csv("nameOfCsv.csv", function(thisData){... 

Sie können alle Arbeiten innerhalb dieser Funktion ausführen oder einfach "thisData" an eine Variable anhängen und sie woanders verwenden.

Beispiel:

//set variable wherever you want, global if need be to be accessed by all functions. 
//I would recommend not naming it just data as it may conflict 
//but for the sake of this example 

var data; 

d3.csv("nameOfCsv.csv", function(thisData) { 
     data = thisData; 
    } 

Jetzt können Sie diese Daten in Ihren Funktionen wie so:

var chart = new dimple.chart(svg, data);