如何將D3圖形移動到初始縮放位置並在0,0位置 - RESET圖形？

嗨點擊一個按鈕，我只是想圖形在0,0位置縮小，基本上它是一個重置按鈕。這可能嗎？我可以在哪些元素上做到這一點？如何將D3圖形移動到初始縮放位置並在0,0位置 - RESET圖形？

會不會是： -

d3.select('svg').select('g').transition() 
.duration(1000).attr('transform', "translate(0,0)scale(1)")

但移動整個圖形，包括X和Y軸之上，只是縮小了出來。我只想要繪製區域內的元素像線條，點，x和y軸上的值一樣變化。

請幫忙。 JSFiddle

來源

2016-09-30 Rahi

基本上你只需要設置全部恢復1.

你應該實現一個方法來集中所有的輸入控件的位置（0,0）和規模。

http://jsbin.com/niqara/2/edit?js,output

function reset(source) { 
    d3.select('g').transition() 
    .duration(750) 
    .attr("transform", "translate(0,0)scale(1)"); 
    zoomListener.scale(1); 
    zoomListener.translate([0, 0]); 
}

來源

2016-09-30 14:00:58 rafaelcastrocouto

我看到這個JS小提琴，但它並沒有正常工作。我需要知道我需要重新設置所有的控件，以及如何進行？例如xaxis，yaxis ..等 – Rahi

好消息！我能用這兩行來實現我想要的功能： zoomListener.scale（1）; zoomListener.translate（[0，0]）; 唯一的一點是它沒有在圖immidiately更新，但我要拖了一點，所以圖追溯到0,0 – Rahi

偉大的...當你找到解決方案發佈一個答案，所以其他人可以從中學習。 – rafaelcastrocouto

我能夠使用剛剛低於線實現「復位」（移動圖形元素0,0和縮小以初始）： -

function resetGraph(){ 
    zoom.scale(1); //Zoom out to this scale 
    zoom.translate([0, 0]); //move/drag chart to 0,0 xy position 
    zoomed(); //Handler that updates all elements after zoom performed 
    slided(); //Optional- to update slider which works to zoom in and zoom out 
}

基本上所有這一切可以進入一個功能，並可以在任何地方或點擊一個按鈕重置圖形。

來源

2016-10-05 04:08:48 Rahi

如何將D3圖形移動到初始縮放位置並在0,0位置 - RESET圖形？

回答

相關問題