D3 v4.x学习（1-7）—— 树状图探究

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

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