ユーザーが現在からスクロールバックできる時系列折れ線グラフに取り組んでいます。リアルタイム d3.js チャートに関するチュートリアル、ズームとパンに関するチュートリアル、および外部データ ソースの使用に関するチュートリアルを見つけることができます。この知識をすべてまとめるのに苦労しています。
私が探している動作は次のとおりです。
- グラフは時間を遡ってパンできます (つまり、線、データ ポイント、および軸がマウスまたは指のドラッグで移動します)。
- パンは x 軸にのみ影響し、ズームは発生しません。
- ユーザーがグラフをパンすると、より多くのデータが読み込まれ、無限スクロールの経験が得られます
- ユーザーがスクロールできるように、少なくとも 1 つの余分な「ページ」に相当するデータをバッファリングする予定です (この部分は既に把握しています)。
- チャートのパンはすでにスムーズに翻訳されているので、トランジションは必要ないと思います
これは私がこれまで取り組んできたことです：
// 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's 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's the best way to do that?
}
}
このコードでは、サーバーからさらにデータをプルするタイミングを知ることができますが、パン オフセットと連動する方法でデータをグラフに挿入する方法がわかりません。transform translate を使用する必要がありますか、それとも自分の行のパスの d 値を更新できますか?
どんな提案も歓迎します...また、時系列データを無限にパンすることをすでに示しているデモを誰かが知っていれば、それは大歓迎です。