d3.js：放大的單擊事件

我正試圖獲得相同的行爲Wil Linssen's implementation 但d3.js版本4 我很困惑與變焦的API版本4d3.js：放大的單擊事件

，我作出的改變原來的實施： zoom.translate()替換 d3.zoomTransform(selection.node())並添加適當的點來代替：

svg.attr("transform", 
    "translate(" + t.x + "," + t.y + ")" + 
    "scale(" + t.k + ")" 
);

這一個：

zoom 
    .scale(iScale(t)) 
    .translate(iTranslate(t));

更換，以

var foo = iTranslate(t); 
zoom. 
    translateBy(selection, foo[0], foo[1]); 
zoom 
    .scaleBy(selection, iScale(t));

但它仍然有一個問題，看起來像規模，縮小...

例子：Example on d3.v4 - jsfiddle

感謝您的幫助

來源

2016-10-08 Vladyslav Babenko

研究使用D3 V4 API，它提供插值等開箱的最簡單的方法之後。在從零開始實現的原始問題縮放中，這在版本4中是沒有意義的。解決方案與@Nixie答案類似，只有幾行代碼。

此版本包括鍋爲好，如果你不需要，刪除svg.call(zoom);

最後一個例子：Zoom D3 v4 - jsfiddle

值得注意的一點是：功能：

function transition() { 
    svg.transition() 
     .delay(100) 
     .duration(700) 
     .call(zoom.scaleTo, zoomLevel); 
     //.on("end", function() { canvas.call(transition); }); 
}

call(zoom.ScaleTo, zoomLevel) - 將放大到頁面的中心。但是，如果您需要圖像的中心，請使用此圖像：call(zoom.transform, transform);

其中transform是設置圖像中心的函數。例如這樣的功能：

function transform() { 
    return d3.zoomIdentity 
     .translate(width/2.75, height/2.75) 
     .scale(zoomLevel) 
     .translate(-width/2.75, -height/2.75); 
}

來源

2016-10-09 11:09:13

這一段代碼不能解決所有問題，但可能是一個起點。在D3 V4可以在一行代碼轉換變焦（也https://github.com/d3/d3-zoom/blob/master/README.md#zoom_transform見）

function interpolateZoom (translate, scale) { 
    return selection.transition().duration(350) 
       .call(zoom.transform, 
        d3.zoomIdentity.translate(translate[0], translate[1]).scale(scale)) 
}

修改例如：https://jsfiddle.net/2yx1cLrq/。另外，你需要在所有呼叫selection.node()更換selection到d3.zoomTransform

來源

2016-10-08 17:58:40 Nixie

爲了使它更短，我猜你可以跳過var self = this;'語句。 – mgc

謝謝，更新 – Nixie

感謝您的解決方案，這真的很好，很有幫助！ –

d3.js：放大的單擊事件

回答

相關問題