D3从入门到企业图谱

类企业图谱

最近在研究跳槽事宜，所以去天某查看看企业的介绍，发现了企业图谱，真的是一览无余，因为是程序员所以就想研究一下这个是怎么实现的，嗯使用的D3.js。因为没用过D3，所以刚好补充一下自己的技术面。 我将以代码加注释的形式来入门D3。毕竟D3博大精深，如果哪里有不对的地方，请见谅。

1. 安装 d3.js

yarn add d3
cnpm i d3 -S

2. 引用 d3.js

import * as d3 from 'd3'

3. 初始化svg

// 初始化svg
initSvg() {
    // 获取屏幕宽高
    this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
    this.screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    // 创建缩放zoom
    this.zoomHandler = d3
        .zoom()
        .scaleExtent([0.4, 10]) // 缩放范围
        .on('zoom', () => {
            // 设置缩放数据
            d3.select('svg')
                .select('g')
                .attr('transform', d3.event.transform)
        })
    // 创建svg画布
    this.SVG = d3
        .select('#container') // d3.select() 是选择所有指定元素的第一个 d3.selectAll () 是选择所有
        .append('svg') // 添加画布
        .attr('width', this.screenWidth) // 设置宽度
        .attr('height', this.screenHeight) // 设置高度
        .call(this.zoomHandler) // 引入缩放zoom
        .call(this.zoomHandler.translateBy, this.screenWidth / 2, this.screenHeight / 2) // 初始化位置
        .on('dblclick.zoom', null) // 阻止双击放大 影响页面单击行为以及乱放大行为
    // 创建基础容器组件 并初始化位置
    this.basicsG = this.SVG.append('g').attr('id', 'basicsG').attr('transform', ` translate(${this.screenWidth / 2},${this.screenHeight / 2}) scale(1)`)
    // 创建公司名称组件
    this.createCompanyNameG()
    // 创建箭头组件
    this.createArrowsG()
    // 创建展示项组件
    this.createExhibitionContentG()
},

4. 缩放svg

// 放大SVG
onMagnifySVG() {
    this.zoomHandler.scaleBy(this.SVG, 1.1) // 执行该方法后 会触发zoom事件
    d3.zoomTransform(this.SVG.node())
},
// 缩小SVG
onShrinkSVG() {
    this.zoomHandler.scaleBy(this.SVG, 0.9) // 执行该方法后 会触发zoom事件
    d3.zoomTransform(this.SVG.node())
},

5. 重置svg

// 重置SVG
onResetSVG() {
    // 我的思路是 删除原来的 svg 再重制
    // 删除原svg
    d3.select('svg').remove()
    // 重制svg
    this.initSvg()
},

6. 将svg 保存为图片

// 下载图片 这里只提供思路 和官网有出入
onDownload() {
    // svg => canvas => png
    const serializer = new XMLSerializer()
    const source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(this.SVG.node())
    const image = new Image()
    image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
    const canvas = document.createElement('canvas')
    canvas.width = this.screenWidth
    canvas.height = this.screenHeight
    const context = canvas.getContext('2d')
    context.fillStyle = '#fff'
    context.fillRect(0, 0, 10000, 10000)
    image.onload = () => {
        context.drawImage(image, 0, 0)
        const a = document.createElement('a')
        a.download = `${this.companyName}.png`
        a.href = canvas.toDataURL('image/png')
        a.click()
    }
},

7. 全屏展示

// 初始化屏幕状态
this.isScreenState = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement)
// 屏幕状态变化监听
window.onresize = () => {
    this.isScreenState = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement)
}
onFullScreen() {
    let element = document.documentElement
    if (this.isScreenState) {
        if (document.exitFullscreen) {
            document.exitFullscreen()
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen()
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen()
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen()
        }
    } else {
        if (element.requestFullscreen) {
            element.requestFullscreen()
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen()
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen()
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen()
        }
    }
    setTimeout(this.onResetSVG, 200)
},