如何垂直樹在d3js

Question

我目前正在研究由d3.js創建的樹，我發現了一個非常有用的例子，但我想出了一種方法來使樹垂直，這裏是我的碼。

<div class="dashboard-block-content" > 
    <style> 

    .node circle { 
     fill: #fff; 
     stroke: steelblue; 
     stroke-width: 1.5px; 
    } 

    .node { 
     font: 10px sans-serif; 
    } 

    .link { 
     fill: none; 
     stroke: #ccc; 
     stroke-width: 1.5px; 
    } 

    </style> 
    <script src="//d3js.org/d3.v3.min.js"></script> 
    <script> 
    var treeData = [ 
     {'name' : 'CDS','icon': '../image/logo.png','user_id': 'CDS','level':'CDS','children' : [{'name' : 'Yap Cheng Wei','icon': '../image/seniorsniper.png','user_id': '1','level':'Senior Sniper','children' : [{'name' : 'woon cai cai','icon': '../image/prosniper.png','user_id': '2','level':'Pro Sniper','children' : [{'name' : 'tan kiang kiong','icon': '../image/prosniper.png','user_id': '7','level':'Pro Sniper','children' : [{'name' : 'koo hou wai','icon': '../image/seniorsniper.png','user_id': '19','level':'Senior Sniper','children' : [{'name' : 'Gan Jiang Han','icon': '../image/sniper.png','user_id': '50','level':'Sniper','children' : [{'name' : 'Jenny Lim ','icon': '../image/sniper.png','user_id': '80','level':'Sniper','children' : []},{'name' : 'Low Jia Sheng','icon': '../image/sniper.png','user_id': '81','level':'Sniper','children' : []},{'name' : 'See Jia Min','icon': '../image/sniper.png','user_id': '82','level':'Sniper','children' : []}]},{'name' : 'Lim Di er','icon': '../image/sniper.png','user_id': '51','level':'Sniper','children' : [{'name' : 'Tan Jie Ying','icon': '../image/sniper.png','user_id': '83','level':'Sniper','children' : []},{'name' : 'lim jo yun','icon': '../image/sniper.png','user_id': '84','level':'Sniper','children' : []},{'name' : 'kok mei kuan','icon': '../image/sniper.png','user_id': '85','level':'Sniper','children' : []}]},{'name' : 'Tiu Zhi Jian','icon': '../image/sniper.png','user_id': '52','level':'Sniper','children' : [{'name' : 'Kam Hui Yin','icon': '../image/sniper.png','user_id': '86','level':'Sniper','children' : []},{'name' : 'Chua Mei Xuan','icon': '../image/sniper.png','user_id': '87','level':'Sniper','children' : []},{'name' : 'Tan Mei Ke','icon': '../image/sniper.png','user_id': '88','level':'Sniper','children' : []}]}]},{'name' : 'Zheng Yu cheng','icon': '../image/seniorsniper.png','user_id': '24','level':'Senior Sniper','children' : [{'name' : 'Gan De Huat','icon': '../image/sniper.png','user_id': '53','level':'Sniper','children' : [{'name' : 'Tan Mei Mei','icon': '../image/sniper.png','user_id': '89','level':'Sniper','children' : []},{'name' : 'Ng li ling','icon': '../image/sniper.png','user_id': '90','level':'Sniper','children' : []},{'name' : 'Chan Li Sen','icon': '../image/sniper.png','user_id': '91','level':'Sniper','children' : []}]},{'name' : 'Gan Wei Ping','icon': '../image/sniper.png','user_id': '54','level':'Sniper','children' : [{'name' : 'Wong Ka Wai','icon': '../image/sniper.png','user_id': '92','level':'Sniper','children' : []},{'name' : 'Tan Li Hui','icon': '../image/sniper.png','user_id': '93','level':'Sniper','children' : []},{'name' : 'Tan Mei Wen','icon': '../image/sniper.png','user_id': '94','level':'Sniper','children' : []}]},{'name' : 'Teoh Ha Ze','icon': '../image/sniper.png','user_id': '55','level':'Sniper','children' : [{'name' : 'Yap Sally ','icon': '../image/sniper.png','user_id': '95','level':'Sniper','children' : []},{'name' : 'Yap Shan ee','icon': '../image/sniper.png','user_id': '96','level':'Sniper','children' : []},{'name' : 'Lim Shen Ni','icon': '../image/sniper.png','user_id': '97','level':'Sniper','children' : []}]}]},{'name' : 'Goh Xue ling','icon': '../image/seniorsniper.png','user_id': '25','level':'Senior Sniper','children' : [{'name' : 'Tee Hui Qi','icon': '../image/sniper.png','user_id': '56','level':'Sniper','children' : [{'name' : 'Soh Xie Wei','icon': '../image/sniper.png','user_id': '98','level':'Sniper','children' : []},{'name' : 'Soh hui su','icon': '../image/sniper.png','user_id': '99','level':'Sniper','children' : []},{'name' : 'Tan Wei Xin','icon': '../image/sniper.png','user_id': '100','level':'Sniper','children' : []}]},{'name' : 'Teh Isa Bella','icon': '../image/sniper.png','user_id': '57','level':'Sniper','children' : [{'name' : 'Chew wa sa','icon': '../image/sniper.png','user_id': '101','level':'Sniper','children' : []},{'name' : 'vicky chang ','icon': '../image/sniper.png','user_id': '102','level':'Sniper','children' : []},{'name' : 'Tan Jia Ler','icon': '../image/sniper.png','user_id': '103','level':'Sniper','children' : []}]},{'name' : 'Koo Jia Ren','icon': '../image/sniper.png','user_id': '58','level':'Sniper','children' : [{'name' : 'Lim Xiao Enn','icon': '../image/sniper.png','user_id': '104','level':'Sniper','children' : []},{'name' : 'Ang Jia Yan','icon': '../image/sniper.png','user_id': '105','level':'Sniper','children' : []},{'name' : 'lee Yi Jia','icon': '../image/sniper.png','user_id': '106','level':'Sniper','children' : []}]}]},{'name' : 'Jasmine Koh ','icon': '../image/sniper.png','user_id': '26','level':'Sniper','children' : []}]},{'name' : 'tan li li','icon': '../image/seniorsniper.png','user_id': '8','level':'Senior Sniper','children' : [{'name' : 'lee kai wen','icon': '../image/sniper.png','user_id': '20','level':'Sniper','children' : [{'name' : 'tan Jia Huan','icon': '../image/sniper.png','user_id': '59','level':'Sniper','children' : []},{'name' : 'Trista tan ','icon': '../image/sniper.png','user_id': '60','level':'Sniper','children' : []},{'name' : 'teyo zhe wee','icon': '../image/sniper.png','user_id': '61','level':'Sniper','children' : []}]},{'name' : 'Wong Ja mu','icon': '../image/sniper.png','user_id': '27','level':'Sniper','children' : [{'name' : 'Gan Wei Yi','icon': '../image/sniper.png','user_id': '62','level':'Sniper','children' : []},{'name' : 'Zhou Zheng Hong','icon': '../image/sniper.png','user_id': '63','level':'Sniper','children' : []},{'name' : 'Tan Yuan Shan','icon': '../image/sniper.png','user_id': '64','level':'Sniper','children' : []}]},{'name' : 'Aw jing yang','icon': '../image/sniper.png','user_id': '28','level':'Sniper','children' : [{'name' : 'Tan Se Te','icon': '../image/sniper.png','user_id': '65','level':'Sniper','children' : []},{'name' : 'Tan Xin Yee','icon': '../image/sniper.png','user_id': '66','level':'Sniper','children' : []},{'name' : 'Hor Yan Qi','icon': '../image/sniper.png','user_id': '67','level':'Sniper','children' : []}]},{'name' : 'Sim shi ying','icon': '../image/sniper.png','user_id': '29','level':'Sniper','children' : []}]},{'name' : 'yap boon hua','icon': '../image/sniper.png','user_id': '9','level':'Sniper','children' : [{'name' : 'Ng hui yin','icon': '../image/sniper.png','user_id': '21','level':'Sniper','children' : []}]},{'name' : 'tan li fun','icon': '../image/seniorsniper.png','user_id': '10','level':'Senior Sniper','children' : [{'name' : 'Tan Xiao Wei','icon': '../image/sniper.png','user_id': '30','level':'Sniper','children' : [{'name' : 'Yap Sheng zhi','icon': '../image/sniper.png','user_id': '68','level':'Sniper','children' : []},{'name' : 'Tan Yu Le','icon': '../image/sniper.png','user_id': '69','level':'Sniper','children' : []},{'name' : 'Yang Gong jun','icon': '../image/sniper.png','user_id': '70','level':'Sniper','children' : []}]},{'name' : 'Tee Swee Kiam','icon': '../image/sniper.png','user_id': '31','level':'Sniper','children' : [{'name' : 'teoh hui qing','icon': '../image/sniper.png','user_id': '71','level':'Sniper','children' : []},{'name' : 'Tan li na','icon': '../image/sniper.png','user_id': '72','level':'Sniper','children' : []},{'name' : 'Zhong ming zhen','icon': '../image/sniper.png','user_id': '73','level':'Sniper','children' : []}]},{'name' : 'Tee Siao Lun','icon': '../image/sniper.png','user_id': '32','level':'Sniper','children' : [{'name' : 'Tee ker sin','icon': '../image/sniper.png','user_id': '74','level':'Sniper','children' : []},{'name' : 'loh na na','icon': '../image/sniper.png','user_id': '75','level':'Sniper','children' : []},{'name' : 'tee pei ssu','icon': '../image/sniper.png','user_id': '76','level':'Sniper','children' : []}]}]},{'name' : 'koh aik lee','icon': '../image/sniper.png','user_id': '11','level':'Sniper','children' : []},{'name' : 'woon yi ting','icon': '../image/sniper.png','user_id': '12','level':'Sniper','children' : []},{'name' : 'Koh jin yi','icon': '../image/sniper.png','user_id': '13','level':'Sniper','children' : [{'name' : 'Tan Sheao Wei','icon': '../image/sniper.png','user_id': '46','level':'Sniper','children' : []},{'name' : 'wong lian may','icon': '../image/sniper.png','user_id': '47','level':'Sniper','children' : []},{'name' : 'Angie Tan ','icon': '../image/sniper.png','user_id': '48','level':'Sniper','children' : []}]},{'name' : 'George Lim ','icon': '../image/sniper.png','user_id': '23','level':'Sniper','children' : []},{'name' : 'Leong yong wa','icon': '../image/sniper.png','user_id': '34','level':'Sniper','children' : []},{'name' : 'Yoong Sze Jiat','icon': '../image/sniper.png','user_id': '35','level':'Sniper','children' : []},{'name' : 'yvvonne ggo ','icon': '../image/sniper.png','user_id': '36','level':'Sniper','children' : []},{'name' : 'ee wee hao','icon': '../image/sniper.png','user_id': '37','level':'Sniper','children' : []},{'name' : 'chua wee hao','icon': '../image/sniper.png','user_id': '38','level':'Sniper','children' : []},{'name' : 'Chia Ya li','icon': '../image/sniper.png','user_id': '39','level':'Sniper','children' : []},{'name' : 'Hussein Abdi ','icon': '../image/sniper.png','user_id': '49','level':'Sniper','children' : []},{'name' : 'Gan Jia Yun','icon': '../image/sniper.png','user_id': '77','level':'Sniper','children' : []},{'name' : 'Lim Leon ','icon': '../image/sniper.png','user_id': '78','level':'Sniper','children' : []},{'name' : 'Tan Kristine ','icon': '../image/sniper.png','user_id': '79','level':'Sniper','children' : []}]},{'name' : 'kenny lim eng sheng','icon': '../image/sniper.png','user_id': '5','level':'Sniper','children' : [{'name' : 'Tan Re Dai','icon': '../image/sniper.png','user_id': '17','level':'Sniper','children' : []},{'name' : 'Ong Kelvin ','icon': '../image/sniper.png','user_id': '40','level':'Sniper','children' : []},{'name' : 'Loo Ai Vee','icon': '../image/sniper.png','user_id': '41','level':'Sniper','children' : []},{'name' : 'Sok sui sui','icon': '../image/sniper.png','user_id': '42','level':'Sniper','children' : []}]},{'name' : 'poh wei sheng','icon': '../image/sniper.png','user_id': '6','level':'Sniper','children' : [{'name' : 'Ooi Zi yin','icon': '../image/sniper.png','user_id': '18','level':'Sniper','children' : []},{'name' : 'Yeoh Pai See','icon': '../image/sniper.png','user_id': '43','level':'Sniper','children' : []},{'name' : 'wong ka mee','icon': '../image/sniper.png','user_id': '44','level':'Sniper','children' : []},{'name' : 'Koh li on','icon': '../image/sniper.png','user_id': '45','level':'Sniper','children' : []}]},{'name' : 'wong siong xie','icon': '../image/sniper.png','user_id': '14','level':'Sniper','children' : []}]},{'name' : 'koh wei hao','icon': '../image/sniper.png','user_id': '3','level':'Sniper','children' : [{'name' : 'wu xie','icon': '../image/sniper.png','user_id': '15','level':'Sniper','children' : []}]},{'name' : 'Yap Zhan Wei','icon': '../image/sniper.png','user_id': '4','level':'Sniper','children' : [{'name' : 'Jing teng xing xing','icon': '../image/sniper.png','user_id': '16','level':'Sniper','children' : []}]},{'name' : 'Seow Ai Lyn','icon': '../image/sniper.png','user_id': '22','level':'Sniper','children' : []},{'name' : 'Lee guan ling','icon': '../image/sniper.png','user_id': '33','level':'Sniper','children' : []},{'name' : 'Jason Chan Keat Hwee','icon': '../image/sniper.png','user_id': '107','level':'Sniper','children' : []},{'name' : 'Chan Keat Hwee','icon': '../image/sniper.png','user_id': '108','level':'Sniper','children' : []},{'name' : 'Tan Bao Bao','icon': '../image/sniper.png','user_id': '110','level':'Sniper','children' : []},{'name' : 'yap xue wei','icon': '../image/sniper.png','user_id': '111','level':'Sniper','children' : []}]}   ]; 

    var width = 960, 
     height = 2200; 

    var cluster = d3.layout.tree() 
     .size([height, width - 160]); 

    var svg = d3.select("body").append("svg") 
     .attr("width", width) 
     .attr("height", height) 
     .append("g") 
     .attr("transform", "translate(40,0)"); 
     root = treeData[0]; 
     var nodes = cluster.nodes(root).reverse(); 

     var link = svg.selectAll(".link") 
      .data(cluster.links(nodes)) 
     .enter().append("path") 
      .attr("class", "link") 
      .attr("d", elbow); 

     var node = svg.selectAll(".node") 
      .data(nodes) 
     .enter().append("g") 
      .attr("class", "node") 
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) 

     node.append("circle") 
      .attr("r", 4.5); 

     node.append("text") 
      .attr("dy", 3) 
      .attr("dx", function(d) { return d.children ? -8 : 8; }) 
      .attr("text-anchor", function(d) { return d.children ? "end" : "start"; }) 
      .text(function(d) { return d.name; }); 

    function elbow(d, i) { 
     return "M" + d.source.y + "," + d.source.x 
      + "V" + d.target.x + "H" + d.target.y; 
    } 

    </script> 
    </div> 

這裏是我發現"Elbow" Dendrogram

Answer 1

比如你只需要改變變換爲節點，肘關節功能。

var node = svg.selectAll(".node") 
      .data(nodes) 
     .enter().append("g") 
      .attr("class", "node") 
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

function elbow(d, i) { 
    return "M" + d.source.x + "," + d.source.y 
     + "H" + d.target.x + "V" + d.target.y; 
}