从文件中读取d3数据，而不是将其编码到程序中

Question

嗯，我目前使用的是Dimple，它是一种用于假人的D3。

我已经安排好，像这样我的数据：

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 } 
     ]; 

但它确实住在this dataset就是要大得多，看起来像这样：

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 
... 

什么是最好的（即易用性和可维护性的平衡）将数据以一种动态方式添加到程序中的方式，而不是按照我所做的那样对其进行硬编码。

---

应用目前我使用它（试图）生成一个简单的条形图

：

<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

如果该文件是在同一目录只需使用以下D3方法：

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

你可以在这个函数里面做所有的工作，或者把'thisData'附加到一个变量上并在其他地方使用。

例子：

//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; 
    } 

现在你可以在你的函数使用这些数据像这样：您目前如何使用它

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