D3 - 設置雙擊的縮放比例

我一直在環顧四周，還沒有找到一個固定的解決方案來設置用戶雙擊屏幕時的縮放比例。D3 - 設置雙擊的縮放比例

我最遠的是通過設置scaleVal在dblclicked功能（如圖所示）的小提琴這裏顯示

https://jsfiddle.net/helloGoodDay/62vq9h8p/3/

  function dblclicked() 
      { 
       var translate = zoom.translate(), 
        mouse = d3.mouse(this), 
        scaleOld = zoom.scale(), 
        zoomOld = Math.log(scaleOld)/Math.LN2, 
        zoomNew = d3.event.shiftKey ? Math.max(minScale + 8, Math.ceil(zoomOld) - 1) : Math.min(maxScale + 8, Math.floor(zoomOld) + 1), 
        scaleNew = Math.pow(scaleVal, zoomNew), 
        zoomDelta = scaleNew/scaleOld; 

       svg.transition() 
        .duration(350) 
        .call(zoom 
        .scale(scaleNew) 
        .translate([(translate[0] - mouse[0]) * zoomDelta + mouse[0], (translate[0] - mouse[0]) * zoomDelta + mouse[0]]) 
        .event); 

       d3.event.stopImmediatePropagation(); 
      }

但是，如果你雙擊多一點，節點消失我也不喜歡動畫。

有沒有辦法以節點不消失的方式設置縮放比例的值，並且動畫不是這麼煩人？

編輯：功能是從https://github.com/d3/d3/issues/1985

來源

2016-08-22 helloGoodDay

你想設置了一個上限縮放值？因爲如果你只減小縮放比例，它將永遠是一個非常無限的縮放。 –

謝謝你的迴應。在小提琴中，當前的縮放範圍是從1到1000.所以是的，我已經設置了最大縮放值。 – helloGoodDay

好了告訴我，如果這個解決方案適合於您的問題

https://jsfiddle.net/qm6h4wm7/2/

我做了什麼：

減少每個縮放之間規模（1）
限制在5縮放，以總是在視圖（2）

一個節點的方式，節點不消失

(1) scaleNew = Math.pow(2, zoomNew) 

(2) if(zoomNew<5){...}

來源

2016-08-23 07:59:01

謝謝你花時間回答這個問題。您當前的解決方案與我所做的解決方案非常相似，即限制縮放，然後在達到最大縮放後縮小。我們的答案是一個快速修復。我想我正在尋找一個解決方案，其中如果你放大縮小節點將不會消失，如果解決方案可以完成沒有動畫。 – helloGoodDay

對不起，我認爲當你說「節點不會消失」時我不理解你。如果你阻止最大變焦，它們不會消失......不是？對於動畫效果，似乎你想在雙角色事件上調用滾輪效果，不是嗎？你嘗試過嗎？ –

謝謝你的回覆。我現在明白爲什麼節點消失了，這是因爲縮放縮放最大程度地通過了。這個例子你是對的，它不會消失。我不知道如何去掉動畫或者改變它來使它更平滑。作爲一個快速解決方案，我增加了動畫的持續時間。 – helloGoodDay

D3 - 設置雙擊的縮放比例

回答

相關問題