D3 v4.x入门（1-7）—— 树状图探究

拼搏现实的明天。 2021-09-16 02:48 310阅读 0赞

![70][]

树状图，一般用于树形结构数据展示（废话呢么），下面源码实现上图效果

<template>
      <div id='svgContainer' style="">
        <div class="every">
          <h3>树状图探究</h3>
          <div class="svg" id="chordDiagram"></div>
        </div>
      </div>
    </template>
    <script>
    import * as d3 from 'd3'
    export default {
     data () {
        return {
            treeData: {
            'name': '中国',
            'children': [
              {
                'name': '浙江',
                'children':
                [
                  {'name': '杭州'},
                  {'name': '宁波'},
                  {'name': '温州'},
                  {'name': '绍兴'}
                ]
              },
              {
                'name': '广西',
                'children': [
                  {
                    'name': '桂林',
                    'children':
                    [
                      {'name': '秀峰区'},
                      {'name': '叠彩区'},
                      {'name': '象山区'},
                      {'name': '七星区'}
                    ]
                  },
                  {'name': '南宁'},
                  {'name': '柳州'},
                  {'name': '防城港'}
                ]
              },
              {
                'name': '黑龙江',
                'children': [
                  {'name': '哈尔滨'},
                  {'name': '齐齐哈尔'},
                  {'name': '牡丹江'},
                  {'name': '大庆'}
                ]
              },
              {
                'name': '新疆',
                'children':
                  [
                    {'name': '乌鲁木齐'},
                    {'name': '克拉玛依'},
                    {'name': '吐鲁番'},
                    {'name': '哈密'}
                  ]
              }
            ]
          }
        },
        methods: {
            treeDiagram () {
          // 树状图因为默认是上往下渲染的，改成从左往右渲染后会发现width和height都倒过来了，可以看具体参数的细节
              let width = 400
              let height = 400
              let _this = this
              let svg = d3.select('#treeDiagram')
                .append('svg')
                .attr('width', width)
                .attr('height', height)
              // 初始化树状图数据获取器
              let tree = d3.tree()
                .size([width, height - 80])
                .separation(function (a, b) {
                  return (a.parent === b.parent ? 1 : 2) / a.depth
                })
              // 初始化json数据转成一棵树，这个步骤是非常必要的！！
              let hierarchyData = d3.hierarchy(_this.treeData)
                .sum(function (d) {
                  return d.value
                })
              // 初始化树状图
              let treeData = tree(hierarchyData)
              // 获取节点
              let nodes = treeData.descendants()
              // 获取边,也就是连线
              let links = treeData.links()
              // 绘制线
              let g = svg.append('g').attr('transform', 'translate(40,0)')
              g.selectAll('.link')
                .data(links)
                .enter().append('path')
                .attr('class', 'link')
                .style('fill', '#cccccc')
                .attr('d', d3.linkHorizontal()
                  .x(function (d) { return d.y })
                  .y(function (d) { return d.x }))
              // 绘制文本和节点
              g.selectAll('.node')
                .data(nodes)
                .enter().append('g')
                .attr('class', function (d) { return 'node' + (d.children ? ' node--internal' : ' node--leaf') })
                .attr('transform', function (d) { return 'translate(' + d.y + ',' + d.x + ')' })
              g.selectAll('.node').append('circle')
                .attr('r', 5)
                .style('fill', 'green')
              g.selectAll('.node').append('text')
                .attr('dy', 3)
                .attr('x', function (d) { return d.children ? -8 : 8 })
                .style('text-anchor', function (d) { return d.children ? 'end' : 'start' })
                .text(function (d) {
                  return d.data.name
                })
                .style('font-size', '11px')
            }
        },
        mounted () {
            this.treeDiagram ()
        }
    }
    </script>
    <style lang="less">
    #svgContainer{
      width: 100%;
      height: 100%;
      .every{
        width: 400px;
        height: 425px;
        margin:15px;
        float: left;
        h3{
          margin:0;
          .button{
            float: right;
            margin-right: 20px;
            font-size: 14px;
            cursor: pointer;
            padding: 2px 8px;
            border:1px solid #ccc;
            background: yellowgreen;
            border-radius: 4px;
            &:hover{
              background: violet;
            }
          }
        }
        .svg{
          width: 400px;
          height: 400px;
        }
      }
    }
    </style>

[70]: /images/20210813/3e50c729f321412ca2a3fb87476b6e40.png