Javascript 如何在D3版本4中使用JSON加载数据？

我是D3新手，我正在用它来构建一个简单的折线图。然而，我在网上找到的很多例子都是针对版本3的，不再有效

我有一些代码：

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

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

  // 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.close; })]);

  // 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));

});

data.csv：

date,close
1-May-12,58.13
30-Apr-12,53.98
27-Apr-12,67.00

但是，我似乎无法将其重构为仅使用普通Javascript数组（ie）：

而且文档也不是非常清晰。我应该看哪个API？谢谢

这里有一个到d3v5.x的转换：

我不是

d3

英雄，看到基于

d3

早期版本的各种示例也很沮丧，这些示例在当前版本中没有运行，但我想继续使用

d3

，因此我认为花时间了解随着

d3

的发展，发生了什么变化是值得的

因此，将@saj的

d3v3.x

示例转换为

d3v5.x

——大多数更改涉及使语法更加简洁和具体。下面是几个例子。还有其他变化——比较这两种小提琴。希望这有帮助

d3.v3.x

var parseDate = d3.time.format("%d-%b-%y").parse;

var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

d3.v5.x（注意不同的

格式

说明符来处理特定的日期格式）

---

d3.v3.x

var parseDate = d3.time.format("%d-%b-%y").parse;

var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

d3.v5.x

var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

var xAxis = d3.axisBottom(x).ticks(5);
var yAxis = d3.axisLeft(y).ticks(5);

---

d3.v3.x

var parseDate = d3.time.format("%d-%b-%y").parse;

var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

d3.v5.x

var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

var xAxis = d3.axisBottom(x).ticks(5);
var yAxis = d3.axisLeft(y).ticks(5);

---

@saj Uncaught TypeError:无法读取未定义的属性'format'，非常确定这是一个v3.x示例，不管怎样，他们现在有版本5，我还没有看过任何教程，我只使用版本3，谢谢你的帮助，但我真的放弃了D3，我只打算使用Canvas，我发现ChartJS和D3都很漂亮horrible@Antoine-这取决于你的需求。D3是非常棒和强大的，但对于一个简单的图表等，其他东西可能会更快地完成工作。祝你好运