javascript - 一个 slider ，两个图表，使用 Rickshaw 和 D3.js

Question

我有两张用人力车渲染的图表，非常好。我有一个 slider ，我希望能够操作这两个图，但它现在正在做的是操作我声明的最后一个图:

//graph one
var graph_one = new Rickshaw.Graph( {
        element: document.querySelector("#chart_one"),
        height: 150,
        width: 170,
        renderer: 'bar',
        series: data
} );

//slider code
var slider_one = new Rickshaw.Graph.RangeSlider({
    element: document.querySelector('#slider-range'),
    graph: graph_one
});

graph_one.render();

//graph two
var graph_two = new Rickshaw.Graph( {
        element: document.querySelector("#chart_two"),
        renderer: 'line',
        height: 150,
        width: 170,
        series: data
} );

//slider code
var slider_two = new Rickshaw.Graph.RangeSlider({
    element: document.querySelector('#slider-range'),
    graph: graph_two
});

graph_two.render();

是否可以让一个 slider 操作两个图形？

Answer 1

我通过编辑 rickshaw.js 来完成此操作，特别是编辑 Rickshaw.Graph.RangeSlider 以接受图形数组作为图形变量:

Rickshaw.Graph.RangeSlider = function(args) {

    var element = this.element = args.element;
    var graph = this.graph = args.graph;
    //added by bozdoz
    if(graph.constructor === Array){
            $( function() {
                $(element).slider( {
                    range: true,
                    min: graph[0].dataDomain()[0],
                    max: graph[0].dataDomain()[1],
                    values: [ 
                        graph[0].dataDomain()[0],
                        graph[0].dataDomain()[1]
                    ],
                    slide: function( event, ui ) {
                        //on slide, move both graphs
                        for(var i=0; i < graph.length; i++){
                            graph[i].window.xMin = ui.values[0];
                            graph[i].window.xMax = ui.values[1];
                            graph[i].update();

                            // if we're at an extreme, stick there
                            if (graph[i].dataDomain()[0] == ui.values[0]) {
                                graph[i].window.xMin = undefined;
                            }
                            if (graph[i].dataDomain()[1] == ui.values[1]) {
                                graph[i].window.xMax = undefined;
                            }
                        }
                    }
                } );
            } );
            graph[0].onUpdate( function() {

                var values = $(element).slider('option', 'values');

                $(element).slider('option', 'min', graph[0].dataDomain()[0]);
                $(element).slider('option', 'max', graph[0].dataDomain()[1]);

                if (graph[0].window.xMin == undefined) {
                    values[0] = graph[0].dataDomain()[0];
                }
                if (graph[0].window.xMax == undefined) {
                    values[1] = graph[0].dataDomain()[1];
                }

                $(element).slider('option', 'values', values);

            } );
            ...

然后，在声明图形时，我只需要将 slider 代码添加到最后一个图形，包括两个图形变量作为一个数组:

var slider_two = new Rickshaw.Graph.RangeSlider({
    element: document.querySelector('#slider-range'),
    graph: [graph_one, graph_two]
});

完全按照我希望的方式工作:http://jsfiddle.net/bozdoz/k4NmL/