如何树形展⽰多层级数据（或者叫树形展⽰）（⼀）
我们在⼯作中总会遇到各种各样的问题，有些可能是重复的⼯作，有些可能在你看来是很扯蛋的，但是，还是要去实现，因为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:"吐鲁番"},
{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}
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.links = this.dTreeData.descendants().slice(1)
},
/**
* 点击Node上的text跳转
*/
clickText(d)    {
console.log(d)
window.open("www.baidu","_blank")
},
/**
* @description 数据与Dom进⾏绑定
*/
update (source) {
d.y = d.depth * 180
})
/
/ *************************** Nodes section *************************** //
// Update
const svg = d3.select(this.$el).select('svg.d3-tree')
const container = svg.select('g.container')
let node = container.selectAll('g.node')function怎么记忆
.des, d => {
return d.id || (d.id = ++this.index)
})
// Enter any new sources at the parent's previous position.
let nodeEnter = ().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 = (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 = it()
.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 = ().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 = (link)
.duration(this.duration)
.attr('d', d => { return this.diagonal(d, d.parent) })
// Transition exiting nodes to the parent's new position.
.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.
d.x0 = d.x
d.y0 = d.y
d.y0 = d.y
})
},
/**
* @description control the canvas zoom to up or down
*/
zoomed () {
d3.select(this.$el).select('g.container').attr('transform', ansform)
}
},
created() {
this.id = this.uuid()
},
mounted () {
//创建svg画布
this.width = ElementById(this.id).clientWidth
this.height = ElementById(this.id).clientHeight
const svg = d3.select(this.$el).select('svg.d3-tree')
.attr('width', this.width)
.attr('height', this.height)
const transform = anslate(this.margin.left, p).scale(1)            const container = svg.select('g.container')
// init zoom behavior, which is both an object and function
< = d3.zoom()
.scaleExtent([1 / 2, 8])
.on('zoom', d)
svg.)
< = Root()
this.)
},
computed: {
treemap () {
().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;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。