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

Question

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

这是 JSfiddle 的工作情况(没有外部 csv):http://jsfiddle.net/nicart/6k96mzta/1/

但我无法调用 csv spendData.csv (此处托管: https://raw.githubusercontent.com/nicart/DC-js-chart/master/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

感谢 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/ )。