如何在d3js中垂直树

蓝光

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

这是我发现“弯头”树状图的示例

奇拉格·科塔里(Chirag Kothari)

您只需要更改节点的变换和弯头功能。

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;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在d3js中垂直树

来自分类Dev

如何在 d3js 中向条形字符添加垂直线?

来自分类Dev

如何进行d3js树设计

来自分类Dev

如何进行d3js树设计

来自分类Dev

更新d3js中的树布局坐标

来自分类Dev

如何在d3.js中走树

来自分类Dev

如何在d3js中控制地图上图层的顺序

来自分类Dev

如何在我的d3js示例中添加if条件

来自分类Dev

如何在d3js图形中更改图例的文本颜色?

来自分类Dev

如何在d3js中控制地图上图层的顺序

来自分类Dev

如何在给定示例d3js中填充条之间的区域

来自分类Dev

如何在D3js中动态添加图像到圈子

来自分类Dev

如何在 D3js 中为不同的图表显示不同的标题?

来自分类Dev

d3js:如何在圆弧的末端放置圆圈

来自分类Dev

d3.js-如何在D3js中为时间刻度在X轴上滴答滴答?

来自分类Dev

从d3js树布局中删除节点及其子节点

来自分类Dev

D3js可折叠树发出错误

来自分类Dev

如何修复d3js中重叠的弧形标签?

来自分类Dev

D3.js-如何在此可折叠树中向文本添加新行?

来自分类Dev

如何在d3.js树中更改祖先的样式类和文本内容?

来自分类Dev

如何在d3.js树中删除初始过渡

来自分类Dev

如何在d3.js中绘制直线(水平和垂直)

来自分类Dev

如何在d3js中创建下一级别的流程图

来自分类Dev

如何在分组的条形图d3js v4中减小矩形大小

来自分类Dev

如何在D3js中创建分组密钥,该分组密钥是两个JSON属性的组合

来自分类Dev

如何在 D3js v4 和 Angular 4 中实现 FontAwesome v5 图标

来自分类Dev

理解d3js中的函数

来自分类Dev

d3js中的过渡功能

来自分类Dev

将叶子节点转换为子节点下的子节点,用于 D3js 树中的 Json 对象

Related 相关文章

热门标签

归档