D3 v4.x入门（1-13）—— 矩阵树图探究

谁借莪１个温暖的怀抱￠ 2021-09-16 03:08 383阅读 0赞

矩阵树图和之前的区域分布图其实有点像，看图说话~

![70][]

相比于区域分布，矩阵树图多个了纬度叫做权重，括号里的数值就是权重，权重越大，占的区域越大。源码如下。

关于这个系列有什么想要讨论的问题可以+Q 380205984 发邮件什么的我一般都懒得回，QQ邮件的打开速度太慢了~

<template>
      <div id='svgContainer' style="">
        <div class="every">
          <h3>矩形树图</h3>
          <div class="svg" id="treemap"></div>
        </div>
    </template>
    <script>
    import * as d3 from 'd3'
    export default {
      methods: {
         treemap () {
          const width = 400
          const height = 400
          const treeData = {
            'name': '中国',
            'children': [
              {
                'name': '浙江',
                'children':
                [
                  {'name': '杭州', 'gdp': 1234},
                  {'name': '宁波', 'gdp': 3334},
                  {'name': '温州', 'gdp': 2000},
                  {'name': '绍兴', 'gdp': 1002}
                ]
              },
              {
                'name': '广西',
                'children': [
                  {
                    'name': '桂林',
                    'children':
                    [
                      {'name': '秀峰区', 'gdp': 2131},
                      {'name': '叠彩区', 'gdp': 2015},
                      {'name': '象山区', 'gdp': 988},
                      {'name': '七星区', 'gdp': 756}
                    ]
                  },
                  {'name': '南宁', 'gdp': 3699},
                  {'name': '柳州', 'gdp': 4511},
                  {'name': '防城港', 'gdp': 2325}
                ]
              },
              {
                'name': '黑龙江',
                'children': [
                  {'name': '哈尔滨', 'gdp': 784},
                  {'name': '齐齐哈尔', 'gdp': 885},
                  {'name': '牡丹江', 'gdp': 1254},
                  {'name': '大庆', 'gdp': 3240}
                ]
              },
              {
                'name': '新疆',
                'children':
                  [
                    {'name': '乌鲁木齐', 'gdp': 2456},
                    {'name': '克拉玛依', 'gdp': 1015},
                    {'name': '吐鲁番', 'gdp': 998},
                    {'name': '哈密', 'gdp': 654}
                  ]
              }
            ]
          }
          const color = d3.scaleOrdinal(d3.schemeCategory10)
          // 数据转化
          const treemap = d3.treemap().size([width, height])
          const root = d3.hierarchy(treeData).sum((d) => d.gdp)
          const tree = treemap(root) // 获取treemap结构树
          const leaves = tree.leaves() // 将生成的树形结构转化成叶子节点数组
          // 用叶子节点数组绘图
          const svg = d3.select('#treemap')
            .append('svg')
            .attr('width', width)
            .attr('height', height)
          const g = svg.selectAll('.rects')
            .data(leaves)
            .enter()
            .append('g')
            .attr('class', 'rects')
          // 添加矩阵
          g.append('rect')
            .attr('x', (d) => d.x0)
            .attr('y', (d) => d.y0)
            .attr('width', (d) => (d.x1 - d.x0))
            .attr('height', (d) => (d.y1 - d.y0))
            .style('fill', (d) => color(d.parent.data.name))
            .style('stroke', '#cccccc')
          // 添加描述
          g.append('text')
            .attr('x', (d) => (d.x1 - d.x0) / 2 + d.x0)
            .attr('y', (d) => (d.y1 - d.y0) / 2 + d.y0)
            .attr('dx', (d) => { return -d.data.name.length / 2 + 'em' })
            .attr('dy', (d) => { return '-0.5em' })
            .text((d) => { return d.data.name })
            .attr('font-size', (d) => { return 14 - d.depth + 'px' })
            .attr('fill', '#f0f0f0')
          g.append('text')
            .attr('x', (d) => (d.x1 - d.x0) / 2 + d.x0)
            .attr('y', (d) => (d.y1 - d.y0) / 2 + d.y0)
            .attr('dx', (d) => { return -(d.value.toString().length + 2) / 4 + 'em' })
            .attr('dy', (d) => { return '1em' })
            .text((d) => { return '(' + d.value + ')' })
            .attr('font-size', (d) => { return 14 - d.depth + 'px' })
            .attr('fill', '#ffffff')
        }
      },
      mounted () {
        this.treemap()
      }
    }
    </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/805d6e93aea048a0b6ce8371a578f407.png