如何在d3js中垂直树

Posted 2023-03-05

【中文标题】如何在d3js中垂直树

【英文标题】：how to vertical the tree in d3js

【发布时间】：2016-12-21 15:47:40

【问题描述】：

我目前正在研究由 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' : 'REDACTED','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

【问题讨论】：

解释如下：bl.ocks.org/mbostock/3184089

我之前试过，是我想要的垂直树，但是对角线路径不是我想要的东西，我之前尝试过修改它，但结果很糟糕

【参考方案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;