如何使用 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 格式（时间、值）。它基本上找到了这个情节的峰值。使用这些数据，我想在这个可视化本身上标记这些点。

在我看来，Rickshaw 本身并不支持使用不同渲染器的多个系列（两者都必须是线或都是散点图等）。

那我该怎么办呢？

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