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

Load CSV file in DC.JS with D3.csv

本文关键字：中的 CSV 文件 JS DC D3 csv 加载      更新时间：2023-09-26

我尝试使用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')

谢谢。

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

你的代码中有几个错误(好吧，一个半)。

首先，csv的签名调用像

这样的用法
d3.csv(file_name, function(data, error) {...

注意data和error在你的代码中是颠倒的。

其次，如果没有显示任何内容，您应该首先在回调函数中放入如下内容: 
console.log(data);
console.log(error);

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

关于你的最后一个问题- d3没有同步加载CSV(或任何其他格式)的API。当然，您并不局限于d3来加载CSV，但没有包含它是有原因的-现代Javascript正在逐渐远离这些东西，以使页面响应性更好。

相关文章：