Frage Wie markiere ich diskrete Punkte in einem Zeitreihendiagramm mit D3 / Rickshaw?


Ich benutze Rikscha Erstellen eines Live-Update-Zeitreihendiagramms

Hier ist die Demo: http://abhshkdz.github.io/icuvisualanalytics/prototypes/rickshaw.html

Die Daten sind im CSV-Format (Zeit, Wert), und dies ist das Kern-Javascript für die Visualisierung:

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

Jetzt gibt es einen weiteren Datensatz, der von einem Algorithmus generiert wird. Diese Daten sind auch im CSV-Format (Zeit, Wert). Es findet im Grunde die Spitzen dieses Grundstücks. Mit diesen Daten möchte ich diese Punkte an dieser Visualisierung selbst markieren.

Soweit ich gesehen habe, unterstützt Rickshaw nicht mehrere Reihen mit verschiedenen Renderern nativ (beide müssen Linien oder beide Streudiagramme usw. sein).

Also, wie soll ich das machen?


9
2018-06-28 15:09


Ursprung


Antworten:


Die Multi-Renderer-Funktion wurde vor etwa einem Monat hinzugefügt. Dies Beispiel zeigt, wie mehrere Renderer in einem Diagramm kombiniert werden. Der relevante Code des Beispiels:

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)'
        }
    ]
});

4
2017-07-16 21:40