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

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

我的问题是我不知道如何只加载部分数据。 它在浏览器中显示，因此宽度约为1200到1920像素。 我正在使用比例来计算线条大小。 但是如果我为窗口宽度设置一个比数据大小更小的值，d3.js会计算每行的宽度为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 + dy); }) .attr("height", function (d) { return h - y(d.y0); }) .attr("width", x.rangeBand()) .attr("fill", function (d, i) { return color(i); }); 

Answer 1

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

 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(); } });