D3简单的线图与我自己的数据

时间:2018-01-10 10:07:37

标签: javascript html d3.js svg

我正在学习D3。我在互联网上找到了一个简单的线图示例,我正在尝试使用自己的数据。而不是data.csv在一个单独的文件中,如在示例中我把它放在html脚本中,如下所示:

var data            =   [
    { date: 2008, num: 54248 }, { date: 2009, num: 54446 },
    { date: 2010, num: 54731 }, { date: 2011, num: 55212 },
    { date: 2012, num: 55595 }, { date: 2013, num: 56165 },
    { date: 2014, num: 56690 }, { date: 2015, num: 56929 },
    { date: 2016, num: 57005 }, { date: 2017, num: 57010 }
];

但是现在所有其他的东西都在d3.csv()函数中。就像x.domain,y.domain和svg.append一样。我不需要d3.csv函数,因为我再也没有csv了。但是我用什么功能替换它呢?假设它就像替换函数一样简单。

d3.csv("data.csv", function(error, data) {
  if (error) throw error;

  // format the data
  data.forEach(function(d) {
      d.date = parseTime(d.date);
      d.num = +d.num;
  });

  // Scale the range of the data
  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.num; })]);

  // Add the valueline path.
  svg.append("path")
      .data([data])
      .attr("class", "line")
      .attr("d", valueline);

  // Add the X Axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  // Add the Y Axis
  svg.append("g")
      .call(d3.axisLeft(y));

});

0 个答案:

没有答案