D3js V4中心節點在Zoomable樹

我發現這個來自Rob Schmuecker的example用於將節點集中在一個被點擊的樹中。這個例子適用於D3js版本3.我將此示例移植到d3js version 4。但在我的例子中，如果我嘗試移動svg，svg會在定位後跳轉。有人知道最近出了什麼問題嗎？這裏有一些代碼片段。D3js V4中心節點在Zoomable樹

var baseSvg = d3.select("#tree-container").append("svg").attr("width", viewerWidth) 
                 .attr("height", viewerHeight) 
                 .attr("class", "overlay") 
                 .call(zoomListener); 

function zoom() { 
    if(d3.event.transform != null) { 
    svgGroup.attr("transform", d3.event.transform); 
    } 
} 

function centerNode(source) { 
    t = d3.zoomTransform(baseSvg.node()); 
    x = -source.y0; 
    y = -source.x0; 
    x = x * t.k + viewerWidth/2; 
    y = y * t.k + viewerHeight/2; 
    d3.select('g').transition().duration(duration).call(zoomListener.transform, d3.zoomIdentity.translate(x,y).scale(t.k)); 
}

來源

2017-03-02 Tokker

將centerNode中的選擇從'g'更改爲'svg'似乎可以做到這一點。這可能是因爲縮放偵聽器在svg元素上被調用。

作爲參考，centerNode功能現在會是這樣的：

function centerNode(source) { 
    t = d3.zoomTransform(baseSvg.node()); 
    x = -source.y0; 
    y = -source.x0; 
    x = x * t.k + viewerWidth/2; 
    y = y * t.k + viewerHeight/2; 
    d3.select('svg').transition().duration(duration).call(zoomListener.transform, d3.zoomIdentity.translate(x,y).scale(t.k)); 
}

來源

2017-04-03 11:08:08 Mammo

謝謝你這就是它。我更新了我的例子，它的工作原理。 [鏈接] https://jsfiddle.net/Tokker/mwm1sxhh/21/ – Tokker

請在文檔中查看Collapsible Tree的示例。它可以幫助你，它正在使用D3.js的版本4

來源

2017-03-02 16:31:29 jprivillaso

感謝您的答覆，但如不包括我的問題。 – Tokker

D3js V4中心節點在Zoomable樹

回答

相關問題