[小記] 把 D3 的Collapsible Tree 範例改成 vertical 垂直顯示

原本想要使用的 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


留言

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源