我有很多数据,我将它们绘制为堆叠条形图。我的测试数据大约有 500k JSON 对象(= 50k 行,有 10 个堆叠段)。
我的问题是我不知道如何仅加载部分数据。它显示在浏览器中,因此宽度约为 1200 到 1920 像素。
我正在使用比例来计算线条大小。但是,如果我将窗口宽度设置为比数据大小更小的值,则 d3.js 会将每行的宽度计算为 0,这意味着不会显示任何内容。
所以,我必须设置 50k 的宽度来显示所有内容,但这有点不切实际 - 它会让浏览器崩溃,只有当我使用大约 10k 的数据然后设置宽度10k 像素。第二件事是渲染确实需要很长时间(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);
});