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

本文介绍了d3.js只加载部分数据/同步数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有非常多的数据，我画的堆叠酒吧。我的测试数据在这里是大约500k JSON对象（= 50k行与10个堆叠段）大。

I have very much data, which I draw as stacked Bars. My Testdata here is around 500k JSON-Objects (=50k lines with 10 stacked segments) big.

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

My problem is that I don´t knew how to load only parts of the data. It´s shown in an browser and so the width is around 1200 to 1920 pixels. I am using an scale to calculate the Lines size. But if I set an tinier value to the window width than the size of the data, d3.js calculates the width for every Line to be 0, which means that nothing is shown. So, I have to set an width of 50k to show everything, but this is a little bit unpracticable - and it let´s the browser crash, it´s only working when I use around 10k of the data and then set an width of 10k px. And the 2nd thing is that it reallllly takes very long (5secs) to render.

1。）我如何能够获取这些数据并在窗口中显示width = 1920 and - 如果我移动箭头键或概览图 - 加载其他数据？

1.) How am I able to take that data and show it in an window of width=1920 and - if I am moving the Arrow keys or an overview chart - load the other data?

2。）如何同步数据？例如：如果我有一个长滑块，这个滑块应该确定我感兴趣的数据。所以，范围是从0到50k，然后我滑动它，在〜4000。我想跳到图表到这个位置。

2.) How is it possible to synchronize data? Eg.: If I had an long slider, this slider should determine at which data I am interested. So, the range is from 0 to 50k then I am sliding it and are at ~4000. I want to jump in the Graph to that position.

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

推荐答案

您可以使用 slice 方法将数据子集化。这不会减少加载的数据 。但是给你一种方法来减少你一次在图表上绘制的酒吧量。

You can use the slice method to subset the data. This doesn't reduce the data loaded. But gives you a way to reduce the amount of bars you draw on the graph at once.

data = all_data.slice(start_index, end_index);

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

Then set the start_index and end_index based on what data you want to display. You can add an event listener, for which the callback function changes the start and end indices.

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