Создание линейного графика в D3 с данными в независимых массивах?

Question

Я новичок в D3 и хотел бы создать линейный график. Как бы я поступил так, если мои данные находятся в 3 отдельных массивах?

Мои данные будут такими, за исключением 365 значений:

даты даты = ["2013-07-11T00: 00: 00", "2013-07-12T00: 00: 00", "2013-07-15T00: 00: 00", "2013-07-16T00: 00: 00 "," 2013-07-17T00: 00: 00 "," 2013-07-18T00: 00: 00 "];

var позиции = [0, 0,004, 0,008, 0,012, 0,016, 0,02];

различные цены = [61,041, 60,93, 61,063, 61,456, 61,473, 61,68];

Позиции представляют собой процентную оценку даты, чтобы упростить построение графиков. Позиции будут значениями х, а цены будут значениями у. Затем я хотел бы, чтобы на оси x отображались отметки, отражающие даты (возможно, при разборе массива дат).

Я нашел учебник в Интернете, но он предназначен для построения кругов, поэтому я не уверен, с чего начать.

Вот учебник: http://www.jeromecukier.net/blog/2012/05/28/manipulating-data-like-a-boss-with-d3/

Заранее спасибо за помощь!

Answer 1

Если все индексы согласованы между массивами, вы можете использовать map создать единый массив из всех них:

var newArray = dates.map(function(d, i){
  return { 'date' : d, 'position' : positions[i], 'price' : prices[i] };
};

Затем вы можете использовать этот массив для создания вашего графика.

Вы также можете использовать первый массив в качестве ваших данных, а затем ссылаться на другие данные по позиции из функций d3, которые все принимают d (точка данных) и i (индекс) в качестве входных данных.

Например, в генераторе строк вы можете сказать:

var line = d3.svg.line()
  .x(function(d, i) { return x(positions[i]); })
  .y(function(d, i) { return y(prices[i]); });

В этом примере x а также y будут весы, которые вы определили для вашего positions а также prices Оси. Такой подход привел бы к немного более сложному коду, чем первый, и, как мы все знаем, Месси не выиграл чемпионат мира.

Answer 2

Вы можете использовать цикл, чтобы превратить несколько массивов в один массив объектов, выглядящих примерно так:

var data = [{date: "2013-07-11T00:00:00", position: 0, prices: 61.041}, ...]

а затем привязать массив данных к пути SVG.

Кроме того, вам, вероятно, не нужно positions. Использование шкалы времени d3 должно справиться со всем этим легко.