帶D3js樹形圖的Reactjs

試圖將Mike Bostock的zoomable treemap轉換爲React組件。部分方式，但不確定在數據取決於呈現的DOM（即寬度）時，在組件之間傳遞數據的最佳方式。帶D3js樹形圖的Reactjs

跨過本史密斯的blog有關混合React和D3js。好東西。

使用Bootstrap控制CSS樣式。所限定的SVG元素以相對容器（基本上是這樣blog）內的絕對位置和最大寬度（100％）：

.svg-container { 
    position: relative; 
    padding-bottom: 30%; 
    overflow: hidden; 
    } 

.svg-content { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

所以的SVG元素變化的屏幕的寬度被調整大小。假設treemap節點屬性如x，y，dx，dy必須固定值而不是過程。思考我必須觀察窗口的resize事件，選取新的svg元素尺寸（「parseInt（d3.select（'。svg-content'）.style（'width'），10）;」）並強制Reactjs重新-render（「React.renderComponent」）。

來源

2014-02-26 Matthew Campbell

我不確定問題是什麼：你不確定如何訪問SVG的高度和寬度，或者只是不確定如何將動態高度和寬度與樹形圖佈局集成？ – AmeliaBR

會重寫這個問題。 –

你有兩個選擇：

給當前的高度和寬度的樹圖佈局，每一次重新計算樹形圖中的高度和寬度的變化;或者，
使用默認大小計算樹圖佈局（最大高度和寬度將爲1，其他所有比例都爲1），並在繪製矩形時使用當前高度和寬度作爲比例因子。

然後，當高度或寬度發生變化時，您只需重繪，而不是重新計算佈局。由於您試圖將不同的組件分開，所以這似乎是最明智的方法。它也更加高效，因爲您只需運行一次佈局功能。您可以從重繪函數中獲取當前的高度和寬度（當然可以訪問svg節點），並且佈局組件不需要知道有關維度的任何信息。

哦，我恐怕parseInt(d3.select('.svg-content').style('width'), 10);不會做你希望的，只返回內聯樣式。您需要獲取計算出的寬度。在this long answer on zooming的末尾有一些如何做到這一點的例子。

來源

2014-02-27 08:11:20 AmeliaBR

謝謝！不知道我知道如何處理佈局方法（Mike的代碼），其中設置了x，y，dx，dy座標（？最大高度和寬度== 1？）。 –

你的意思是啞巴布局函數基本上只是遞歸執行「treemap.nodes（...）」的孩子。這應該使x，y，dx，dy的比率超過max 1x1。然後，當我用Reactjs渲染時，這是我必須獲取實際的寬度/高度，並縮放這些每個矩形元素。 –

啊，我注意到這是你正在使用的可縮放樹形圖。這有點複雜，因爲它已經有一個縮放功能來處理縮放。爲了避免額外的複雜性，我會通過改變x和y刻度的範圍來匹配當前的高度或寬度來進行縮放（參見後面的鏈接中的例子）。不要對佈局功能做任何事情。 – AmeliaBR

帶D3js樹形圖的Reactjs

回答

相關問題