javascript - d3.js 仅加载部分数据/同步数据

Question

我有很多数据，我将它们绘制为堆叠条形图。我的测试数据大约有 500k JSON 对象(= 50k 行，有 10 个堆叠段)。

我的问题是我不知道如何仅加载部分数据。它显示在浏览器中，因此宽度约为 1200 到 1920 像素。我正在使用比例来计算线条大小。但是，如果我将窗口宽度设置为比数据大小更小的值，则 d3.js 会将每行的宽度计算为 0，这意味着不会显示任何内容。所以，我必须设置 50k 的宽度来显示所有内容，但这有点不切实际 - 它会让浏览器崩溃，只有当我使用大约 10k 的数据然后设置宽度10k 像素。第二件事是渲染确实需要很长时间(5秒)。

1.) 我怎样才能获取该数据并将其显示在 width=1920 的窗口中，并且 - 如果我移动箭头键或概览图表 - 加载其他数据？

2.) 如何同步数据？例如:如果我有一个长 slider ，则该 slider 应该确定我感兴趣的数据。所以，范围是从 0 到 50k，然后我滑动它并在 ~4000 处。我想在图表中跳转到该位置。

   dataset = data;
    var stack = d3.layout.stack();
    stack(dataset);

    var x= d3.scale.ordinal()
            .domain(d3.range(dataset[0].length))
            .rangeRoundBands([0, w]);

    var y= d3.scale.linear()
            .domain([0, 1])
            .range([0, h]);

    var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

    var groups = svg.selectAll("g")
                    .data(dataset)
                    .enter()
                    .append("g");

    var rects = groups.selectAll("rect")
                    .data(function (d) {
                        return d;
                    })
                    .enter()
                    .append("rect")
                    .attr("x", function (d, i) {
                        return x(i);
                    })
                    .attr("y", function (d) {
                        return y(d.y0 + d.y);
                    })
                    .attr("height", function (d) {
                        return h - y(d.y0);
                    })
                    .attr("width", x.rangeBand())
                    .attr("fill", function (d, i) {
                        return color(i);
                    });

Answer 1

您可以使用slice方法对数据进行子集化。这不会减少加载的数据。但为您提供了一种方法来减少一次在图表上绘制的条形数量。

data = all_data.slice(start_index, end_index);

然后根据您要显示的数据设置start_index和end_index。您可以添加一个事件监听器，回调函数会更改该事件监听器的开始和结束索引。

var refresh(){
    data = all_data.splice(start_index, end_index)
    //your code to redraw the graph using updated indices goes here
}

d3.select("body")
    .on("keydown", function() {
        if(d3.event.keyCode == 37){
            //left key press
            start_index = start_index - 4000;
            end_index = end_index-4000;
            if (start_index < 0){
                //handle boundary case
                start_index = 0;
                end_index = 4000;
            }
            refresh();
        }
        else if(d3.event.keyCode == 39){
            //right key press
            start_index = start_index + 4000;
            end_index = end_index + 4000;
            if (end_index > all_data.length){
                start_index = all_data.length-4000;
                end_index = all_data.length;
            }
            refresh();
        }
    });