Я работаю над линейной диаграммой временного ряда, которая позволяет пользователю прокручивать назад из настоящего. Я могу найти учебники по диаграммам d3.js в реальном времени, я могу найти учебники по масштабированию и панорамированию, и я могу найти учебники по использованию внешних источников данных. Мне сложно собрать все эти знания.
Вот поведение, которое я ищу:
- График может перемещаться назад во времени (что означает, что линии, точки данных и оси перемещаются при перетаскивании мышью или пальцем).
- Панорамирование должно влиять только на ось X, и никакого масштабирования не должно происходить.
- Когда пользователь нажимает на диаграмму, загружается больше данных, что дает возможность бесконечной прокрутки
- Я планирую буферизацию, по крайней мере, для одной дополнительной информации о "странице", которую пользователь может прокрутить (уже получил эту часть)
- Я не думаю, что мне нужны переходы, потому что панорамирование диаграммы уже плавно переведет его.
Вот что я до сих пор работаю:
// set up a zoom handler only for panning
// by limiting the scaleExtent
var zoom = d3.behavior.zoom()
.x(x)
.y(y)
.scaleExtent([1, 1])
.on("zoom", pan);
var loadedPage = 1; // begin with one page of data loaded
var nextPage = 2; // next page will be page 2
var panX = 0;
function pan()
{
if (d3.event)
{
panX = d3.event ? d3.event.translate[0] : 0;
// is there a better way to determine when
// to load the next page?
nextPage = panX / (width + margin.left + margin.right) + 2;
nextPage = Math.floor(nextPage);
// if we haven't loaded in the next page data
// load it in so that the user can scroll into it
if (nextPage > loadedPage) {
console.log("Load a new page");
loadedPage += 1;
// load more data
Chart.query( /*params will be here*/ ).then(
function(response) {
// append the new data onto the front of the array
data = data.concat(response);
console.log(data.length);
// I need to add the new data into the line chart
// but how do I make that work with the pan
// logic from zoom?
}
);
}
// is this where I update the axes and scroll the chart?
// What the best way to do that?
}
}
В этом коде я могу узнать, когда вытащить больше данных с сервера, но я не уверен, как вставлять данные в диаграмму таким образом, чтобы работать со смещением панорамирования. Я использую преобразование трансляции, или могу ли я обновить значение d пути моей линии?
Любые предложения приветствуются... также, если кто-нибудь знает о каких-либо демках, которые уже показывают бесконечно панорамирование данных временных рядов, это было бы очень оценено.
