為d3樹布局自動調整節點寬度

Question

請提出有關如何根據d3樹布局的節點值自動調整節點寬度的建議。

以下是我改編的鏈接參考和一段代碼。

var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = 960 - margin.right - margin.left,
height = 800 - margin.top - margin.bottom;

http://jsfiddle.net/augburto/YMa2y/

Answer 1

我尚未回答您的確切問題，但實際上您需要動態自動調整svg矩形的大小。 我已經更新了您的小提琴 ，可以使用以下代碼根據子代數動態調整矩形的大小：

> .attr("width", function (d,i) { if(d._children) console.log(rectW +
> d._children.length);
>         return d._children ? (rectW + d._children.length) : rectW; })

這只是將子代數的長度添加到rectW中。 對於您要執行的操作，您需要計算文本的長度並將其設置為矩形的寬度。 這個問題可能會幫助您計算文本的長度。 您還必須重新計算矩形的中心才能放置標簽。

希望這能幫助您前進。

干杯