从 csv 填充折线图答案

【问题标题】：Populating a line graph from csv从 csv 填充折线图
【发布时间】：2014-03-15 16:15:49
【问题描述】：

我正在尝试从 csv 文件中提取信息并在 d3 中填充我的折线图。我的代码格式主要来自：http://bl.ocks.org/mbostock/3884955

这是我从 csv 文件中提取信息的实际代码：

d3.csv("population.csv", function(error, data) {

    // convert your csv data and add it to dataSet
    var color = d3.scale.category10();
    color.domain(d3.keys(data[0]).filter(function(key) {return key !== "year";}));

    var census = color.domain().map(function(name) {
         return {
              name: name,
              values: data.map(function(d) {
                   return {year: d.year, population: +d[name]};  
              })
         };  
    });

我的 CSV 数据结构如下：

year, population1, population2, population3, population4, population5
0, 5000, 5000, 5000, 5000, 5000

（这些只是样本数字，我通过 excel 查看过，看起来还不错）。

但是，当我通过本地主机运行它时，我收到以下错误：

Uncaught TypeError: Object function n(n){n.each(function(){var n,s=Xo.select(this),l=this.__chart__||e,f=this.__chart__=e.copy(),h=null==c?f.ticks?f.ticks.apply(f,a):f.domain():c,g=null==t?f.tickFormat?f.tickFormat.apply(f,a):bt:t,p=s.selectAll(".t...<omitted>...x'

而且它是由这段看起来相对无害的代码触发的，所以我怀疑它首先与我拉取 csv 数据有关。

  var line = d3.svg.axis()
       //.interpolate("basis")
       .x(function(d) {return x(d.year); })
       .y(function(d) {return y(d.population); })

【问题讨论】：

第二块代码是否包含在第一块的回调中？您是否通过本地网络服务器托管 .csv 文件？
还有，不应该是{return key !== "year1"...吗？
第二块代码位于第一块代码的下方。我先调用访问 csv 文件，然后尝试画一条线。 CSV 文件通过本地网络服务器托管。
FernoftheAndes - 不错的收获，我错误地提取了我的数据，年份是正确的。

标签： javascript csv d3.js

【解决方案1】：

*更新。此问题已解决。事实证明，有多种因素触发了代码中的错误。两个主要的事情是（从提供的代码中看不到），变量没有被全局传递，即使它们是全局声明的，列变量和数据变量需要重命名。

【讨论】：