原本想要使用的 sample: http://bl.ocks.org/robschmuecker/7880033 (有拖拉) http://bl.ocks.org/mbostock/4339083 (不含拖拉)，
目標: 改成垂直顯示 (水平轉垂直)。
因為有點難 google 到現成的 sample，後來我發現只要把程式中有關 transform 的參數，只要有 x, y 的，把順序對調。
拖拉的 function 也是 x, y 對調，如 centerNode 的 x, y, updateTempConnector, .on('drag') 的 x,y 。
另外 projection 的地方也要對調。
不知道該不該說自己是 D3 新手..明明好一陣子有看書... 只是沒用，都忘了。
參考:
1. http://bl.ocks.org/d3noob/8326869
2. http://bl.ocks.org/mbostock/3184089
3. http://stackoverflow.com/questions/18099430/how-to-change-orientation-of-a-d3-tree-layout-by-90-degrees
4. https://github.com/mbostock/d3/wiki/Tree-Layout
5. http://jsfiddle.net/augburto/YMa2y/
6. http://stackoverflow.com/questions/17558649/d3-tree-layout-separation-between-nodes-using-nodesize
目標: 改成垂直顯示 (水平轉垂直)。
因為有點難 google 到現成的 sample，後來我發現只要把程式中有關 transform 的參數，只要有 x, y 的，把順序對調。
拖拉的 function 也是 x, y 對調，如 centerNode 的 x, y, updateTempConnector, .on('drag') 的 x,y 。
另外 projection 的地方也要對調。
不知道該不該說自己是 D3 新手..明明好一陣子有看書... 只是沒用，都忘了。
參考:
1. http://bl.ocks.org/d3noob/8326869
2. http://bl.ocks.org/mbostock/3184089
3. http://stackoverflow.com/questions/18099430/how-to-change-orientation-of-a-d3-tree-layout-by-90-degrees
4. https://github.com/mbostock/d3/wiki/Tree-Layout
5. http://jsfiddle.net/augburto/YMa2y/
6. http://stackoverflow.com/questions/17558649/d3-tree-layout-separation-between-nodes-using-nodesize
沒有留言:
張貼留言
若你看的文章，時間太久遠的問題就別問了，因為我應該也忘了... XD