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

【问题标题】：Load CSV file in DC.JS with D3.csv使用 D3.csv 在 DC.JS 中加载 CSV 文件
【发布时间】：2015-05-30 11:55:18
【问题描述】：

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

这是JSfiddle 工作（没有external 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')

谢谢。

【问题讨论】：

标签： javascript csv d3.js dc.js

【解决方案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/)。

【讨论】：

是的，如果您的数据位于单独的文件中，这是正确的做法。感谢您的跟进。如果您已经将数据作为 JavaScript 字符串，则可以使用 d3.csv.parse 同步解析它，就像您想要的那样。可能将数据嵌入到 html 中的隐藏元素中，然后使用 d3.csv.parse is the best way to deal with data in a jsfiddle 加载它。

【解决方案2】：

您的代码中有几个错误（嗯，一个半）。

首先，csv 的签名要求使用类似

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

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

其次，如果什么都没有显示，你应该先在你的回调函数中放入如下内容：

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

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

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

【讨论】：

你好阿米。非常感谢您的帮助，我发现了JS，所以我不太了解，但我设法做到了。