Как отметить отдельные точки на графике временных рядов, используя D3/Rickshaw?

Question

Я использую Rickshaw, чтобы создать график временных рядов в реальном времени.

Вот демо: http://abhshkdz.github.io/icuvisualanalytics/prototypes/rickshaw.html

данные в формате CSV (время, стоимость), и это является основой Javascript для визуализации:

var count = 0, index=0; 

var margin = {top: 10, right: 10, bottom: 10, left: 10}, 
    width = window.innerWidth - margin.right - margin.left - 100, 
    height = window.innerHeight - margin.top - margin.bottom - 100; 

var graph = new Rickshaw.Graph({ 
    element: document.querySelector("#chart"), 
    width: width, 
    height: height, 
    renderer: 'line', 
    min: -300, 
    max: 500, 
    preserve: true, 
    series: new Rickshaw.Series.FixedDuration(
     [ 
      { 
       name: 'ECG', 
       color: palette.color() 
      } 
     ], 
     undefined, 
     { 
      timeInterval: 12.5, 
      maxDataPoints: 400, 
      timeBase: data[index][count].x 
     }) 
    }) 

var x_axis = new Rickshaw.Graph.Axis.Time({ graph: graph }); 

var y_axis = new Rickshaw.Graph.Axis.Y({ 
     graph: graph, 
     orientation: 'left', 
     tickFormat: Rickshaw.Fixtures.Number.formatKMBT, 
     element: document.getElementById('y_axis') 
}); 

var hoverDetail = new Rickshaw.Graph.HoverDetail({ 
    graph: graph 
}); 

graph.render(); 

setInterval(function() { 

    if (count == 2397) { 
     count = 0; 
     index++; 
    } 
    var d = {'ECG': data[index][count+=3].y}; 
    graph.series.addData(d); 
    graph.render(); 

}, 12.5); 

Теперь есть еще один набор данных который генерируется алгоритмом. Эти данные также находятся в формате csv (время, значение). Он в основном находит пики этого сюжета. Используя эти данные, я хочу отметить эти точки в этой визуализации.

Насколько я понял, Рикша не поддерживает несколько рядов с использованием разных рендерингов (либо оба должны быть линейными, либо разбросными графиками и т. Д.).

Итак, как мне это сделать?

Answer 1

Функция мультиобъектива была добавлена ​​около месяца назад. Это example показывает, как объединить несколько рендерингов в одной диаграмме. Соответствующий код примера:

var graph = new Rickshaw.Graph({ 
    element: document.getElementById("chart"), 
    renderer: 'multi', 
    width: 900, 
    height: 500, 
    dotSize: 2, 
    series: [ 
     { 
      name: 'temperature', 
      data: seriesData.shift(), 
      color: 'rgba(255, 0, 0, 0.4)', 
      renderer: 'stack' 
     }, { 
      name: 'heat index', 
      data: seriesData.shift(), 
      color: 'rgba(255, 127, 0, 0.4)', 
      renderer: 'stack' 
     }, { 
      name: 'dewpoint', 
      data: seriesData.shift(), 
      color: 'rgba(127, 0, 0, 0.3)', 
      renderer: 'scatterplot' 
     }, { 
      name: 'pop', 
      data: seriesData.shift().map(function(d) { return { x: d.x, y: d.y/4 } }), 
      color: 'rgba(0, 0, 127, 0.4)', 
      renderer: 'bar' 
     }, { 
      name: 'humidity', 
      data: seriesData.shift().map(function(d) { return { x: d.x, y: d.y * 1.5 } }), 
      renderer: 'line', 
      color: 'rgba(0, 0, 127, 0.25)' 
     } 
    ] 
});