Question

我有很多数据，我将其绘制为堆叠条形图。我的Testdata大约是500k JSON-Objects（= 50k行，10个堆叠段）。

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

1.。）我如何获取该数据并在宽度= 1920的窗口中显示它 - 如果我移动箭头键或概览图表 - 加载其他数据？

2.。）如何同步数据？例如：如果我有一个长滑块，这个滑块应该确定我感兴趣的数据。所以，范围从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();
        }
    });

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

1 个答案: