Как использовать JSON для загрузки данных в D3 версии 4?

Question

Я новичок в 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(т.е.):

let data = [
      {date: 'Tue May 01 2012 00:00:00 GMT-0700 (Pacific Daylight Time)', close: 58.13},
     {date: 'Mon Apr 30 2012 00:00:00 GMT-0700 (Pacific Daylight Time)', close: 53.98},
    {date: 'Fri Apr 27 2012 00:00:00 GMT-0700 (Pacific Daylight Time)', close: 67}
    ];

Кроме того, документы не очень четкие.Какой API я должен смотреть?Спасибо

Answer 1

Вот преобразование примера @ saj для использования d3v5.x: https://jsfiddle.net/sunny001/nrhLep72/33/

Я не d3 герой и также разочарован, увидев всевозможные примерыоснованный на более ранних версиях d3, которые не работают в текущей версии, но я хочу работать с d3 в будущем, поэтому я думаю, что стоит понять, что изменилось с развитием d3.

Таким образом, преобразование d3v3.x примера @ saj в d3v5.x - большинство изменений включают в себя более четкий и конкретный синтаксис.Несколько примеров ниже.Есть и другие изменения - сравните две скрипки.Надеюсь, это поможет.

d3.v3.x

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

d3.v5.x (обратите внимание на различные format спецификаторы для обработки вашего конкретного формата даты)

var parseDate = d3.timeParse("%a %b %d %Y");

---

d3.v3.x

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

d3.v5.x

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

---

d3.v3.x

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 xAxis = d3.axisBottom(x).ticks(5);
var yAxis = d3.axisLeft(y).ticks(5);