使用D3.csv在DC.JS中加载CSV文件

Question

我尝试使用DC.js ，但是我无法使用d3.csv加载external csv 。

这是JSfiddle工作方式（没有external csv ）： http : //jsfiddle.net/nicart/6k96mzta/1/

但是我无法调用csv spendData.csv .csv（托管在这里： https : spendData.csv ）我尝试了一些代码，但是我是新手JS，对不起...我认为还可以，但什么都没发生。

d3.csv('https://raw.githubusercontent.com/nicart/DC-js-chart/master/spendData.csv', function(error, spendData) {
      spendData.forEach(function(d) {
       d.Spent = d.Spent.match(/\d+/);
      });  

有可能做出这样的事情吗？

var spendData = d3.csv('https://raw.githubusercontent.com/nicart/DC-js-chart/master/spendData.csv')

谢谢。

Answer 1

您的代码中有两个错误（一个半错误）。

首先，csv的签名要求使用

d3.csv(file_name, function(data, error) {...

请注意，代码中的data和error是相反的。

其次，如果未显示任何内容，则应首先放入回调函数之类的东西：

console.log(data);
console.log(error);

在线检查在您的特定浏览器中查看这些日志输出的正确方法。 否则，将无法调试Javascript。

---

关于您的最后一个问题-d3没有用于同步加载CSV（或其他任何格式）的API。 当然，您不限于d3来加载CSV，但是有一个原因不包含它-为了使页面响应性更好，现代Javascript越来越远离这种东西了。

Answer 2

多亏了Ami Tavory，我才能加载外部CSV。 我把

d3.csv("spendData.csv", function(error, spendData) {
    console.log(error);
    console.log(spendData);
// normalize/parse data
spendData.forEach(function(d) {

在{之后，我添加了脚本的其余所有内容，因此它呈现为：

d3.csv("spendData.csv", function(error, spendData) {
    console.log(error);
    console.log(spendData);
// normalize/parse data
spendData.forEach(function(d) {
    d.Spent = d.Spent.match(/\d+/);
});
// set crossfilter
var ndx = crossfilter(spendData),
    yearDim  = ndx.dimension(function(d) {return +d.Year;}),
    spendDim = ndx.dimension(function(d) {return Math.floor(d.Spent/10);}),
    nameDim  = ndx.dimension(function(d) {return d.Name;}),
    spendPerYear = yearDim.group().reduceSum(function(d) {return +d.Spent;}),
    spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;}),
    spendHist    = spendDim.group().reduceCount();
yearRingChart
    .width(200).height(200)
    .dimension(yearDim)
    .group(spendPerYear)
    .innerRadius(50);
spendHistChart
    .width(300).height(200)
    .dimension(spendDim)
    .group(spendHist)
    .x(d3.scale.linear().domain([0,10]))
    .elasticY(true);
spendHistChart.xAxis().tickFormat(function(d) {return d*10}); // convert back to base unit
spendHistChart.yAxis().ticks(2);
spenderRowChart
    .width(350).height(200)
    .dimension(nameDim)
    .group(spendPerName)
    .elasticX(true);
dc.renderAll();            
});

我认为这对开发人员来说是愚蠢的事情，但对我来说却很难理解。 我更新了Jsfiddle，但由于它是外部CSV，因此不会加载，但是如果需要，您将拥有完整的代码（ http://jsfiddle.net/nicart/6k96mzta/3/ ）。