如何在更新後獲取d3圖表的寬度？

Question

我想在展開可摺疊樹中的節點之後獲取主要的<g>元素的寬度。

可以預料，結構是#tree > svg > g > ...。這是我想要的第一個<g>的寬度。雖然我可以d3.select('#map>svg>g')（然後調用.getBBox().width得到它，我想要的寬度，因爲它是擴展一個點擊的分支。d3.select('#map>svg>g')給它擴大之前是的寬度後。（Demo）

查看演示中的控制檯輸出（console.log()位於第156行），很明顯，單擊會展開或摺疊該樹，這當然會更改<g>的寬度，但較新的值僅顯示在下一個單擊事件。

我檢查t他寬度太早？我是否需要更新某些內容以實時提供「新」寬度？

Answer 1

問題是您正在使用動畫展開節點的過渡。所以當你檢查它時，什麼都沒有發生。但是，您可以使用setTimeout延遲檢查，直到轉換完成。

setTimeout(function() { 
    var c = d3.select('#map>svg>g'), 
     curWidth = c[0][0].getBBox().width; 
    console.log(curWidth); 
}, duration);