如何使用plotly.js

Question

我想通过折线图显示数据。数据具有三列，即；位置和position_value。示例数据如下所示（csv文件）。

scaffold,position,depth
NC_000913.3,1,1
NC_000913.3,2,2
NC_000913.3,3,2
NC_000913.3,4,2
NC_000913.3,5,2
NC_000913.3,6,2
NC_000913.3,7,2
NC_000913.3,8,2
NC_000913.3,9,2
NC_000913.3,10,2
.....
.....
NC_000913.3,1000990,4
NC_000913.3,1000991,1

我要创建如下折线图：

现在，由于数据量很大，我需要显示两个特定范围之间的数据。例如，在某些情况下，位置的范围是100k至400k，我将显示4000至8000的数据。

我正在PHP前端中使用 plotly.js 来创建绘图。

我的尝试

var rawDataURL = 'coverage_short.csv';
var xField = 'position';
var yField = 'depth';

Plotly.d3.csv(rawDataURL, function(err, rawData) {
            if(err) throw err;

            var data = prepData(rawData);
            var layout = {
                title: '',
                xaxis: {

                    rangeslider: {}
                },
                yaxis: {
                    fixedrange: true
                }
            };

            Plotly.plot('graph', data, layout);
        });

        function prepData(rawData) {
            var x = [];
            var y = [];

            rawData.forEach(function(datum, i) {

                x.push(datum[xField]);
                y.push(datum[yField]);
            });

            return [{
                mode: 'lines',
                x: x,
                y: y
            }];
        }

以上代码确实具有为可视化指定特定范围的选项。虽然，加载后它具有滑块选项。我想在加载图表时介绍范围函数，我相信它将提高数据加载速度。

如何在上述代码中引入范围功能？