d3.js縮放和平移時間軸 - 如何顯示動態時間軸範圍？

我有一個縮放和平移時間軸的內置，它沿x軸正確的時間縮放。我試圖在放大或平移時獲取x軸的實時狀態。我如何獲得這些date_min和date_max變量的持有者？d3.js縮放和平移時間軸 - 如何顯示動態時間軸範圍？

這裏是我的jsfiddle：https://jsfiddle.net/thinkin3d/gkL821fm/

我有這個互動的時間表的最終目的是爲了獲得實時縮放/平移狀態，該狀態數據發送回服務器請求數據爲這個新的時間尺度。

在上面的jsfiddle中，div的位置是爲了呈現「x-min」和「x-max」，但我不知道如何正確掛入d3軸或縮放功能來獲得這些動態狀態變量。

這裏是x功能：

var x = d3.time.scale() 
    .domain([new Date(2017, 1, 1), new Date(2018, 1, 1)]) 
    .range([0, width]);

這裏是X軸功能：

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .tickSize(-height);

這裏是變焦功能：

var zoom = d3.behavior.zoom() 
    .x(x) 
    .xExtent([new Date(-2000, 1, 1), new Date(3000, 1, 1)]) 
    .on("zoom", zoomed);

下面是縮放功能：

function zoomed() { 
    svg.select(".x.axis").call(xAxis); 
}

即使能夠console.log（）的x軸範圍將工作，但我缺少一些關於在d3和javascript中綁定和處理變量的方式的基本知識。

請指教！

來源

2017-08-01 Kai San

您可以得到xAxis.scale().domain()其中包含當前正在顯示的X軸的min和max值。我添加了兩行到您zoomed()功能和它的作品對我來說：

function zoomed() { 
    svg.select(".x.axis").call(xAxis); 
    document.getElementById('x-min').innerHTML = xAxis.scale().domain()[0]; 
    document.getElementById('x-max').innerHTML = xAxis.scale().domain()[1]; 
}

對於此展示，你必須先放大圖表。這裏是更新的jsfiddle：https://jsfiddle.net/gkL821fm/2/

編輯： 要僅去年變焦後更新的div，你可以使用裏面zoomed()超時函數，如1000毫秒的持續時間。你可以改變它以適應你的需求。一個小副作用是在最後一次縮放後更新div，會有延遲（等於你設定的時間）。

lastZoomDate = new Date(); 
setTimeout(function() { 
    updateXDiv(new Date()); 
    }, 1000);

這裏，如果圖再次被放大，縮小，僅發生在過去的1000毫秒沒有變化更新的div功能首先檢查。

function updateXDiv(myDate) { 
     if (lastZoomDate <= myDate) { 
     document.getElementById('x-min').innerHTML = xAxis.scale().domain()[0]; 
     document.getElementById('x-max').innerHTML = xAxis.scale().domain()[1]; 
     } 
    }

我已經更新了的jsfiddle包括該編輯：https://jsfiddle.net/gkL821fm/3/

來源

2017-08-01 08:09:23

謝謝！作爲後續，是否有辦法等待並捕獲mouseup上的最後一個x軸狀態？（並忽略在鼠標拖動過程中改變的所有中間值）像zoomed（）函數上的'finally'子句一樣？或者僅在UI手勢結束時觸發.innerHTML更新？ –

我已經在答案中編輯瞭解決評論中的問題的方法。 –

d3.js縮放和平移時間軸 - 如何顯示動態時間軸範圍？

回答

相關問題