d3.js v4放大到圖表中心（NOT MOUSE POSITION !!）

Question

我還有一個d3縮放問題。

我嘗試縮放到圖形的中心（忽略鼠標位置）。但是我沒有找到任何對我有用的東西。

我試過this但我沒有得到它的工作。

並沒有在文檔中找到任何東西。

縮放行爲：

//zoom behavior 
let zoom = d3.zoom() 
    .scaleExtent([0.5, 5]) 
    .on("zoom", zoomed); 

function zoomed() { 
    .. some behavior .. 
    //center here? 
    .. some behavior .. 
} 

我想這應該是一件容易的事，不明白，爲什麼它沒有明確記載的地方。

請參閱this fiddle整件事。

幫助將不勝感激

Answer 1

我設法解決我的問題。

查看this fiddle瞭解詳情。

請注意，這也會禁用x平移。

這裏的相關代碼：

function getBoundingBoxCenterX (selection) { 
    let element = selection.node(); 
    let bbox = element.getBBox(); 
    return bbox.x + bbox.width/2; 
} 

//zoom behavior 
let zoom = d3.zoom() 
    .scaleExtent([1, 5]) 
    .on("zoom", zoomed); 

function zoomed() { 
    let center = getBoundingBoxCenterX(rect); //rect is the charts parent which expands while zooming 
    let chartsWidth = (2 * center) * d3.event.transform.k; 
    d3.event.transform.x = center - chartsWidth/2; 

    rescaling operations with d3.event.transform.... 
}