我们在工作中总会遇到各种各样的问题，有些可能是重复的工作，有些可能在你看来是很扯蛋的，但是，还是要去实现，因为BOSS就在那，业绩也在那等着你。
    前段时间，开完会之后又接到一些新的需求，其实之一就是要在一个页面展示所有数据，这些数据包括机器的状态：内存，磁盘，CPU，以及是应用本身的信息：接口的请求时间，95line,99line，错误率，报错等情况。
    至于怎么展示，我也不知道啊。那好吧，需求总是不清楚，只有做出一版之后，才会知道，这是我想要的，或者，这不是我想要的。
    在我的印象中，Element UI有个tree控件直接就可以树形展示，那除了这些还有哪些呢？感谢baidu, google以及其他技术类网站，通过搜索得知，基于目录的VUE至少可以使用：
        1. element ui中的tree组件
        2. d3 树形展示
        3. echarts中图形展示类型 “tree”
        4. 东方财富图谱中用的jsMind
    上面这些中d3, echarts对于子结点，用户的互动不是很好，至少在此时没有找到一个好的方式实现， element ui中的tree组件感觉展现形式也不太符合大佬口味，东方财富的是做完之后无意发现的，所以上面的4种我都没用，
因为我用的是table转换成tree这样的方式实现，因为table可以套table,或者其实东西，用起来比较方便，以后要增加什么更简单一些。
       还是对几种实现稍做交待：
        1. element ui中的tree组件示例官网很多

        2. d3 树形展示, 先安装package, 然后在项目中引用

<template >   
    <div class="tree-container" :id="id">
        <svg class="d3-tree ">
            <g class="container"/>
        </svg>
    </div>
</template>
<script>
/**
 * 树状图
 */
//数据
const dataset = {
    name:"中国",
    children:[
        {
            name:"浙江",
            children:[
                {name:"杭州" ,value:100},
                {name:"宁波",value:100},
                {name:"温州",value:100},
                {name:"绍兴",value:100}
            ]
        },
        {
            name:"*" , 
            children:
            [
                {name:"乌鲁木齐"},
                {name:"克拉玛依"},
                {name:"吐鲁番"},
                {name:"哈密"}
            ]
        },
        {
            name:"*" , 
            children:
            [
                {name:"乌鲁木齐"},
                {name:"克拉玛依"},
                {name:"吐鲁番"},
                {name:"哈密"}
            ]
        }
    ]
}
import * as d3 from 'd3'
export default {
    name: 'Scale',
    data() {
        return {
            id: '',
            zoom: null,
            index: 0,
            duration: 750,
            root: null,
            nodes: [],
            links: [],
            dTreeData: null,
            transform: null,
            margin: { top: 20, right: 90, bottom: 30, left: 120 }
        }
    },
    methods: {
        uuid () {
            function s4 () {
                return Math.floor((1 + Math.random()) * 0x10000)
                    .toString(16)
                    .substring(1)
            }
            return (
                s4() + s4() + '-' + s4() + '-' + s4() +  '-' + s4() + '-' + s4() + s4() + s4()
            )
        },
        /**
         * @description 获取构造根节点
         */
        getRoot () {
            let root = d3.hierarchy(dataset, d => { 
                return d.children
            })
            root.x0 = this.height / 2
            root.y0 = 0
            return root
        },
        /**
         * @description 点击节点，展开or收缩
         */
        clickNode (d) {
            if (!d._children && !d.children)
                return
            if (d.children) {
                this.$set(d, '_children', d.children)          
                d.children = null
            } else {
                this.$set(d, 'children', d._children)
                d._children = null
            }
            this.$nextTick(
                () => {
                    this.update(d)                
                }
            )
        },
        diagonal (s, d) {
            return `M ${s.y} ${s.x}
                    C ${(s.y + d.y) / 2} ${s.x},
                    ${(s.y + d.y) / 2} ${d.x},
                    ${d.y} ${d.x}`
        },
        /**
         * @description 获取构造的node数据和link数据
         */
        getNodesAndLinks () {
            // treemap generate new x、y coordinate according to root node, 
            // so can‘t use computed propter of vue
            this.dTreeData = this.treemap(this.root)
            this.nodes = this.dTreeData.descendants()
            this.links = this.dTreeData.descendants().slice(1)
        },
        /**
         * 点击Node上的text跳转
         */
        clickText(d)    {
            console.log(d)
            window.open("http://www.baidu.com","_blank")

        },

        /** 
         * @description 数据与Dom进行绑定
         */
        update (source) {
            this.getNodesAndLinks()
            this.nodes.forEach(d => { 
                d.y = d.depth * 180
            })
            // *************************** Nodes section *************************** //
            // Update the nodes...
            const svg = d3.select(this.$el).select('svg.d3-tree')
            const container = svg.select('g.container')
            let node = container.selectAll('g.node')
                .data(this.nodes, d => {
                    return d.id || (d.id = ++this.index)
                }) 
            // Enter any new sources at the parent's previous position.
            let nodeEnter = node.enter().append('g')
                .attr('class', 'node')
                .on('click', this.clickNode)
                .attr('transform', d => {
                    return 'translate(' + source.y0 + ',' + source.x0 + ')'
                })  
            nodeEnter.append("circle")
                .attr("r", 10)
                .style("fill", function(d) { return d.children || d._children ? "lightsteelblue" : "#fff"; });

            nodeEnter.append("a")
                .attr("xlink:href", function(d) { return d.data.name; })
                .append("text")             
                .attr("x", function(d) { return d.children|| d._children ? -15 : 15; })
                .attr("dy", ".35em")
                .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
                .text(function(d) { 
                    if(d.data.value){
                        return d.data.name + d.data.value
                    } else {
                        return d.data.name
                    }
                })
                
            

                .style("fill-opacity", 1e-6);
            // Transition nodes to their new position.
            let nodeUpdate = nodeEnter.merge(node)
                .transition()
                .duration(this.duration)
                .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

            nodeUpdate.select("circle")
                .attr("r", 10)
                .attr("fill", "white")
                .attr("stroke", "blue")
                .attr("stroke-width", 1)
                .style("fill", function(d) { return d.children || d._children ? "lightsteelblue" : "#fff"; });

            nodeUpdate.select("text")
                .style("fill-opacity", 1);

            // Transition exiting nodes to the parent's new position.
            let nodeExit = node.exit()
                .transition()
                .duration(this.duration)
                .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
                .remove();

            nodeExit.select("circle")
                .attr("r", 1e-6);

            nodeExit.select("text")
                .style("fill-opacity", 1e-6);

            // *************************** Links section *************************** //
            // Update the links…
            let link = container.selectAll('path.link')
                .data(this.links, d => { return d.id })
            
            // Enter any new links at the parent's previous position.
            let linkEnter = link.enter().insert("path", "g")
                .attr("class", "link")
                .attr("d", d => {
                    let o = {x: source.x0, y: source.y0};
                    return this.diagonal(o, o)
                })
                .attr("fill", 'none')
                .attr("stroke-width", 1)
                .attr('stroke', '#ccc')
            // Transition links to their new position.
            let linkUpdate = linkEnter.merge(link)
            linkUpdate.transition()
                .duration(this.duration)
                .attr('d', d => { return this.diagonal(d, d.parent) })

            // Transition exiting nodes to the parent's new position.
            link.exit().transition()
                .duration(this.duration)
                .attr("d", d => {
                    let o = {x: source.x, y: source.y};
                    return this.diagonal(o, o)
                })
                .remove();

            // Stash the old positions for transition.
            this.nodes.forEach(d => {
                d.x0 = d.x
                d.y0 = d.y
            })
        },
        /** 
         * @description control the canvas zoom to up or down
         */
        zoomed () {
            d3.select(this.$el).select('g.container').attr('transform', d3.event.transform)
        }
    },
    created() {
        this.id = this.uuid()
    },
    mounted () {
        //创建svg画布
        this.width = document.getElementById(this.id).clientWidth
        this.height = document.getElementById(this.id).clientHeight
        const svg = d3.select(this.$el).select('svg.d3-tree')
            .attr('width', this.width)
            .attr('height', this.height)
        const transform = d3.zoomIdentity.translate(this.margin.left, this.margin.top).scale(1)    
        const container = svg.select('g.container')
        // init zoom behavior, which is both an object and function
        this.zoom = d3.zoom()
            .scaleExtent([1 / 2, 8])
            .on('zoom', this.zoomed)
        container.transition().duration(750).call(this.zoom.transform, transform)
        svg.call(this.zoom)
        this.root = this.getRoot()
        this.update(this.root)
    },
    computed: {
        treemap () {
            return d3.tree().size([this.height, this.width])
        }
    }
}
</script>
<style lang='scss' scoped>
.hyper {
    color: blue;
    text-decoration: underline;
}
.tree-container {
    width: 100%;
    height: 1000px;
}

.d3-tree {
    .node {
        cursor: pointer;
    }

    .node circle {
        fill: #fff;
        stroke: steelblue;
        stroke-width: 1.5px;
    }

    .node text {
        font: 18px sans-serif;
    }

    .link {
        fill: none;
        stroke: #ccc;
        stroke-width: 1.5px;
    }
}
</style>