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);

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

1 个答案: