類企業(yè)圖譜

最近在研究跳槽事宜港柜，所以去天某查看看企業(yè)的介紹请契，發(fā)現(xiàn)了企業(yè)圖譜，真的是一覽無余夏醉，因為是程序員所以就想研究一下這個是怎么實現(xiàn)的爽锥，嗯使用的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
    // 創(chuàng)建縮放zoom
    this.zoomHandler = d3
        .zoom()
        .scaleExtent([0.4, 10]) // 縮放范圍
        .on('zoom', () => {
            // 設置縮放數(shù)據(jù)
            d3.select('svg')
                .select('g')
                .attr('transform', d3.event.transform)
        })
    // 創(chuàng)建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) // 阻止雙擊放大 影響頁面單擊行為以及亂放大行為
    // 創(chuàng)建基礎容器組件 并初始化位置
    this.basicsG = this.SVG.append('g').attr('id', 'basicsG').attr('transform', ` translate(${this.screenWidth / 2},${this.screenHeight / 2}) scale(1)`)
    // 創(chuàng)建公司名稱組件
    this.createCompanyNameG()
    // 創(chuàng)建箭頭組件
    this.createArrowsG()
    // 創(chuàng)建展示項組件
    this.createExhibitionContentG()
},

4. 縮放svg

// 放大SVG
onMagnifySVG() {
    this.zoomHandler.scaleBy(this.SVG, 1.1) // 執(zhí)行該方法后 會觸發(fā)zoom事件
    d3.zoomTransform(this.SVG.node())
},
// 縮小SVG
onShrinkSVG() {
    this.zoomHandler.scaleBy(this.SVG, 0.9) // 執(zhí)行該方法后 會觸發(fā)zoom事件
    d3.zoomTransform(this.SVG.node())
},

5. 重置svg

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

6. 將svg 保存為圖片

// 下載圖片 這里只提供思路 和官網(wǎng)有出入
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. 全屏展示

// 初始化屏幕狀態(tài)
this.isScreenState = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement)
// 屏幕狀態(tài)變化監(jiān)聽
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)
},