1656706432578.gif
svg 绘制树形图, 功能点有:
1.初始化居中
2.可拖拽
3.点击某个节点也会以这个节点居中
4.悬浮某个节点出现tooltip
5.path动画描边
当你学了svg和d3的一些基础之后再来看这个案例,其中包含的知识点非常多,如果能全部掌握,相信你对d3的了解更上一层楼啦
当然你可以不学,直接复制粘贴,也是可以用的~
npm i d3 --save
<template>
<div id="tree" :class="['tree-container']">
</div>
</template>
<script>
import * as d3 from "d3"
const curTranslate = {
x: 0,
y: 0
}
export default {
data() {
return {
dataset: {
cname: "主节点",
children: [{
cname: "子节点1",
children: [{
cname: "孙子点1"
}, {
cname: "孙子点2"
}]
}, {
cname: "子节点2",
}, {
cname: "子节点3",
}],
},
gsize: null,
}
},
mounted() {
this.initTree();
},
methods: {
initTree() {
var timer;
let treeContainer = document.getElementById("tree");
var width = treeContainer.clientWidth;
var height = treeContainer.clientHeight;
var preTranslate = [0, 0];
var svg = d3
.select("#tree")
.append("svg")
.attr("width", width + "px")
.attr("height", height + "px")
var treeGroup = svg
.append("g")
.attr("transition", ".2s")
let zoom = d3.zoom() // 拖拽与缩放
.scaleExtent([.1, 10])
.on("zoom", zoomed);
svg.call(zoom);
function zoomed(event) {
let transofrm = d3.zoomTransform(this)
treeGroup.attr("transform", transofrm.translate(curTranslate.x, curTranslate.y));
}
var hierarchyData = d3.hierarchy(this.dataset).sum(function (d) {
return d.value;
});
var tree = d3
.tree()
.nodeSize([width / 6, height / 6.5]) // 以node为参考缩放，size ()以容器大小缩放，node节点过多会叠加
.separation(function (a, b) { //定义邻居节点的距离
return 1
});
var treeData = tree(hierarchyData); //获取布 局数据
var toolsWrap = svg.append("g").attr("id", 'toolsWrap').attr("style", "display: none;position:relative");
toolsWrap.append('rect').attr('width', 50).attr('height', 15).attr('fill', "#000").on("click", function () {
toolsWrap.attr("transform", `translate(0, 0)`).attr("style", "display: none;")
})
toolsWrap.append('rect').attr('width', 50).attr('height', 15).attr('fill', "red").attr("x", 50)
toolsWrap.append('rect').attr('width', 50).attr('height', 15).attr('fill', "green").attr("x", 100)
var nodes = treeData.descendants(); // 节点数据
var links = treeData.links(); //连线数据
treeGroup.append("g")
.selectAll("path") // 创建节点之间的连线
.data(links)
.enter()
.append("path")
.attr("d", function (d) {
var start = { x: d.source.y, y: d.source.x };
var end = { x: d.target.y, y: d.target.x };
return `M${start.y},${start.x}L${start.y},${end.x - 30}L${end.y},${end.x - 30}L${end.y},${end.x}`
})
.attr("fill", "none")
.attr("stroke", "#999")
.attr("stroke-width", 2)
.attr("stroke-dasharray", function (d) {
return this.getTotalLength()
})
.attr("stroke-dashoffset", function (d) {
return this.getTotalLength()
})
.transition()
.duration(1500)
.attr("stroke-dashoffset", 0).delay(function (d) {
return d.source.depth * 800
});
var gs = treeGroup.append("g") //生成每个节点
.selectAll("g")
.data(nodes)
.enter()
.append("g")
.attr("style", "cursor: pointer;")
.attr("transform", function (d) {
var cx = d.x;
var cy = d.y;
return `translate(${cx},${cy})`;
})
.on("click", function (e) {
let point = this.getBoundingClientRect(); // 被点击节点的dom信息
let gsize = treeGroup.node().getBoundingClientRect(); // 整个group的信息
preTranslate = treeGroup.attr('transform').match(/translate\(.*\)/g)[0].replace("translate(", "").replace(")", "").split(".");
d3.zoomTransform(this).x = (gsize.x + width / 2 - (point.x + point.width / 2) + gsize.width / 2)
d3.zoomTransform(this).y = (gsize.y + height / 2 - point.y)
curTranslate.x = 0
curTranslate.y = 0
let curScale = d3.zoomTransform(this).k;
treeGroup
.transition()
.attr('transform', `translate(${gsize.x + width / 2 - (point.x + point.width / 2) + gsize.width / 2}, ${gsize.y + height / 2 - point.y}) scale(${curScale})`) // 将被点击的节点居中显示
})
.on("mouseenter", function (d, level) {
if (timer) {
clearTimeout(timer)
}
let curScale = d3.zoomTransform(svg).k || 0;
toolsWrap.attr("transform", `translate(0,0) scale(${curScale})`).attr("style", "display: block;")
this.appendChild(toolsWrap.node())
let bbox = this.getBBox(); // bbox 不会因为放大而宽高变化
console.log(bbox);
toolsWrap.attr("transform", `translate(${bbox.x}, ${bbox.height - 4}) scale(${curScale})`).attr("style", "display: block;")
})
.on("mousemove", function (d, v) {
// let point = this.getBoundingClientRect();
}).on("mouseleave", function () {
timer = setTimeout(() => {
toolsWrap.attr("transform", `translate(0, 0)`).attr("style", "display: none;")
}, 1000)
})
gs.append("circle") // 创建节点的圆点
.attr("r", 4)
.attr("fill", "#bae637")
.attr("stroke", "#000")
.attr("stroke-width", 1)
gs.append("text") // 创建节点对应的文本内容
.attr("y", 20)
.attr("dy", 10)
.attr("fill", function (d) {
return "orange"
})
.attr("font-size", 18)
.attr("style", (d) => {
return !d.data.mainNode ? `transform : scale(${.8})` : ""
})
.text(function (d) {
return d.data.cname;
}).attr("x", function (d) {
let bbox = this.getBBox(); // 居中对齐
return -bbox.width / 2
}).each(function (d) {
d3.select(this.parentNode)
.insert("rect")
.attr("width", this.getBBox().width + 20)
.attr("height", this.getBBox().height + 5)
.attr("fill", d => {
return "#000"
})
.attr("stroke", d => {
return "#333"
})
.attr("x", function (d) {
let bbox = this.getBBox(); //居中对齐
return -bbox.width / 2
})
.attr("y", 9).each(function (d) {
this.parentNode.insertBefore(this, this.parentNode.children[0])
})
.attr("style", !d.data.mainNode ? `transform: scale(${.8})` : "")
})
let gsize = treeGroup.node().getBoundingClientRect();
curTranslate.x = width / 2;
curTranslate.y = height / 2 - gsize.height / 2;
treeGroup.attr("transform", `translate(${curTranslate.x}, ${curTranslate.y})`)
},
update() { // 重绘
d3.selectAll("svg").remove()
this.initTree();
},
},
}
</script>
<style scoped lang="scss" >
.tree-container {
position: relative;
width: 800px;
height: 600px;
user-select: none;
border: 1px solid;
background: linear- gradient(to top, transparent 12px, #d9d9d9 12px),
linear-gradient(to left, transparent 12px, #d9d9d9 13px);
background-size: 13px 13px;
}
</style>
