Многострочная диаграмма D3 - множественные массивы, анализ временных меток - PullRequest
Новая
       8

Многострочная диаграмма D3 - множественные массивы, анализ временных меток

0 голосов
/ 27 июня 2018

Так что я использую d3, v4. Попытка построить несколько строк по отдельности, по дате (x) и значению (y). Проблема в том, что я не могу разобрать дату, выполнив ее один раз для первой строки. Что я могу сделать по-другому (в частности, для первой функции), чтобы она работала для обоих?

Вот кодовое перо для всего проекта (где я включил несколько массивов данных, но я только в процессе построения графиков первых двух. Извините за беспорядок. Строки ниже можно найти, начиная с строки 314) Важные предметы: 

function type(data) {
   data[0].forEach(function(d) {
   d.inspected_at =  parseTime(d.inspected_at);
   console.log(d)
   return d;
   })
};

// define the line
var line1 = d3.line()
    .x(function(d) { return x(d.inspected_at); })
    .y(function(d) { return y(d.flow_data);});
var line2 = d3.line()
    .x(function(d) { return x(d.inspected_at); })
    .y(function(d) { return y(d.flow_data);});

// Add the line path(s)
//line CB-01
svg.append('g')
  .attr('clip-path', 'url(#clipper)') 
  .selectAll('path#line').data([data[0]])
  .enter().append("path") 
  .attr("class", "line")
  .attr("id", "downstreamLine")
  .attr("d", line1)
  .attr("stroke", "blue");  
  //line CB-02
svg.append('g')
  .attr('clip-path', 'url(#clipper)') 
  .selectAll('path#line').data([data[1]])
  .enter().append("path") 
  .attr("class", "line")
  // .attr("id", "downstreamLine")
  .attr("d", line2)
  .attr("stroke", "green");

Вот как выглядят мои данные: 

var data = [{"id":"CB-01","inspected_at":"2018-04-08T12:44:30.000Z","flow_data":"4"},
{"id":"CB-01","inspected_at":"2018-04-08T12:44:30.000Z","flow_data":"5"},
{"id":"CB-01","inspected_at":"2018-04-08T12:54:36.000Z","flow_data":"4"},
{"id":"CB-01","inspected_at":"2018-04-08T12:54:36.000Z","flow_data":"7"},
{"id":"CB-01","inspected_at":"2018-04-08T12:54:36.000Z","flow_data":"2"},
{"id":"CB-01","inspected_at":"2018-04-08T13:04:42.000Z","flow_data":"3"},
{"id":"CB-01","inspected_at":"2018-04-08T13:04:42.000Z","flow_data":"9"}],


[{"id":"CB-02","inspected_at":"2018-04-08T12:44:30.000Z","flow_data":"3"},
{"id":"CB-02","inspected_at":"2018-04-08T12:44:30.000Z","flow_data":"2"},
{"id":"CB-02","inspected_at":"2018-04-08T12:54:36.000Z","flow_data":"3"},
{"id":"CB-02","inspected_at":"2018-04-08T12:54:36.000Z","flow_data":"5"},
{"id":"CB-02","inspected_at":"2018-04-08T12:54:36.000Z","flow_data":"6"},
{"id":"CB-02","inspected_at":"2018-04-08T13:04:42.000Z","flow_data":"8"},
{"id":"CB-02","inspected_at":"2018-04-08T13:04:42.000Z","flow_data":"7"}]

Первый массив - одна строка, второй массив - следующий.

Заранее спасибо! Дайте мне знать, если я смогу предоставить дополнительную информацию.

1 Ответ

0 голосов
/ 27 июня 2018

Это должно работать для любого количества строк, повторять каждый массив строк и выполнять один и тот же процесс для каждой точки в этом массиве строк: 

function type(data) {
  data.forEach(arr => arr.forEach(d => d.inspected_at = parseTime(d.inspected_at)))
};
...