从csv填充折线图

Populating a line graph from csv

本文关键字：折线图 填充 csv      更新时间：2023-09-26

我正试图从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); })

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

相关文章：