nuxt、vue树形图d3.js

直接上代码

//安装
npm i d3 --save

<template><div class="d3"><div :id="id" class="d3-content"></div></div>
</template>
<script>
import * as d3 from "d3";export default {props: {data: Object,nodeWidth: {type: Number,default: 340,},nodeHeight: {type: Number,default: 40,},active: {type: String,default: "",},},data() {return {id: "TreeMap" + randomString(4),deep: 0,treeData: null,show: true,demoData: {label: "中国",// link: "demo",url: "https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD/1122445?fr=aladdin",children: [{label: "浙江45468761321",// link: "isClick",disabled: true,children: [{ label: "杭州999999999" },{ label: "宁波" },{ label: "温州" },{ label: "绍兴" },],},{label: "广西",children: [{label: "桂林56465465465464",children: [{ label: "秀峰区" },{ label: "叠彩区" },{ label: "象山区" },{ label: "七星区" },],},{ label: "南宁" },{ label: "柳州" },{ label: "防城港" },],},],},};},mounted() {this.$nextTick(() => {this.drawMap();window.handleCustom=this.handleCustom;});},methods: {drawMap() {let that = this;// 源数据let data = {};// 判断data是否为空对象if (this.data && JSON.stringify(this.data) !== "{}") {data = this.data;} else {data = this.demoData;}if (!this.treeData) {this.treeData = data;} else {// 清空画布d3.select("#" + this.id).selectAll("svg").remove();}let leafList = [];getTreeLeaf(data, leafList);let leafNum = leafList.length;let TreeDeep = getDepth(data);// 左右内边距let mapPaddingLR = 10;// 上下内边距let mapPaddingTB = 0;let mapWidth = this.nodeWidth * TreeDeep + mapPaddingLR * 2;let mapHeight = (this.nodeHeight - 4) * leafNum + mapPaddingTB * 2;// 定义画布—— 外边距 10pxlet svgMap = d3.select("#" + this.id).append("svg").attr("width", mapWidth).attr("height", mapHeight).style("margin", "0px");// 定义树状图画布let treeMap = svgMap.append("g").attr("transform","translate(" +mapPaddingLR +"," +(mapHeight / 2 - mapPaddingTB) +")");// 将源数据转换为可以生成树状图的数据(有节点 nodes 和连线 links )let treeData = d3.tree()// 设置每个节点的尺寸.nodeSize(// 节点包含后方的连接线 [节点高度，节点宽度][this.nodeHeight, this.nodeWidth])// 设置树状图节点之间的垂直间隔.separation(function (a, b) {// 样式一：节点间等间距// return (a.parent == b.parent ? 1: 2) / a.depth;// 样式二：根据节点子节点的数量，动态调整节点间的间距let rate =(a.parent == b.parent? b.children? b.children.length / 2: 1: 2) / a.depth;// 间距比例不能小于0.7，避免间距太小而重叠if (rate < 0.7) {rate = 0.7;}return rate;})(// 创建层级布局，对源数据进行数据转换d3.hierarchy(data).sum(function (node) {// 函数执行的次数，为树节点的总数,node为每个节点return node.value;}));// 贝塞尔曲线生成器let Bézier_curve_generator = d3.linkHorizontal().x(function (d) {return d.y;}).y(function (d) {return d.x;});//绘制边treeMap.selectAll("path")// 节点的关系 links.data(treeData.links()).enter().append("path").attr("d", function (d) {// 根据name值的长度调整连线的起点var start = {x: d.source.x,// 连线起点的x坐标// 第1个10为与红圆圈的间距，第2个10为link内文字与边框的间距，第3个10为标签文字与连线起点的间距,60为自定义htmly:d.source.y +10 +(d.source.data.link ? getPXwidth(d.source.data.link) + 10 : 0) +getPXwidth(d.source.data.label) +(!d.source.data.children?82:0) +20,};var end = { x: d.target.x, y: d.target.y };return Bézier_curve_generator({ source: start, target: end });}).attr("fill", "none").attr("stroke", "#00AB6B")// 虚线// .attr("stroke-dasharray", "8").attr("stroke-width", 1);// 创建分组——节点+文字let groups = treeMap.selectAll("g")// 节点 nodes.data(treeData.descendants()).enter().append("g").attr("transform", function (d) {var cx = d.x;var cy = d.y;return "translate(" + cy + "," + cx + ")";});//绘制节点(节点前的圆圈)groups.append("circle")// 树的展开折叠.on("click", function (event, node) {let data = node.data;if (data.children) {data.childrenTemp = data.children;data.children = null;} else {data.children = data.childrenTemp;data.childrenTemp = null;}that.drawMap();}).attr("cursor", "pointer").attr("r", 4).attr("fill", function (d) {if (d.data.childrenTemp) {return "#00AB6B";} else {return "white";}}).attr("stroke", "#00AB6B").attr("stroke-width", 1);//绘制标注(节点前的矩形)groups.append("rect").attr("x", 8).attr("y", -10).attr("width", function (d) {return d.data.link ? getPXwidth(d.data.link) + 10 : 0;}).attr("height", 22).attr("fill", "red").attr("border", "blue")// 添加圆角.attr("rx", 4);//绘制链接方式groups.append("text").attr("x", 12).attr("y", -5).attr("dy", 10).attr("fill", "white").attr("font-size", 12).text(function (d) {return d.data.link;});//绘制文字groups.append("text").on("click", function (event, node) {let data = node.data;// 被禁用的节点，点击无效if (data.disabled) {return;}// 有外链的节点，打开新窗口后恢复到思维导图页面if (data.url) {window.open(data.url);that.$emit("activeChange", "map");return;}// 标准节点—— 传出 propif (data.dicType) {that.$emit("dicTypeChange", data.dicType);}// 标准节点—— 传出 propif (data.prop) {that.$emit("activeChange", data.prop);}}).attr("x", function (d) {return 12 + (d.data.link ? getPXwidth(d.data.link) + 10 : 0);}).attr("fill", function (d) {if (d.data.prop === that.active) {return "#409EFF";}}).attr("font-weight", function (d) {if (d.data.prop === that.active) {return "bold";}}).attr("font-size", 14).attr("cursor", function (d) {if (d.data.disabled) {return "not-allowed";} else {return "pointer";}}).attr("y", -5).attr("dy", 10).attr("slot", function (d) {return d.data.prop;});// .text(function (d) {//   return d.data.label;// });groups.append("foreignObject").attr("width", (d) => {return getPXwidth(d.data.label) + 22 + (!d.data.children?82:0);}).attr("height", 100).attr("x", function (d) {return 12 + (d.data.link ? getPXwidth(d.data.link) + 10 : 0);}).on("click", function (event, node) {}).attr("y", -10).append("xhtml:div").style("font", '14px "Helvetica Neue"').html((d) => {let _html = `<div class="custom-html"><div>${d.data.label}</div></div>`;if(!d.data.children){_html = `<div class="custom-html"><div>${d.data.label}</div><div οnclick="handleCustom(${1})"><i class="iconfont">&#xe648;</i>视频课</div></div>`;}return _html});},handleCustom(data){debugger}},
};// 获取树的深度
function getDepth(json) {var arr = [];arr.push(json);var depth = 0;while (arr.length > 0) {var temp = [];for (var i = 0; i < arr.length; i++) {temp.push(arr[i]);}arr = [];for (var i = 0; i < temp.length; i++) {if (temp[i].children && temp[i].children.length > 0) {for (var j = 0; j < temp[i].children.length; j++) {arr.push(temp[i].children[j]);}}}if (arr.length >= 0) {depth++;}}return depth;
}// 提取树的子节点，最终所有树的子节点都会存入传入的leafList数组中
function getTreeLeaf(treeData, leafList) {// 判断是否为数组if (Array.isArray(treeData)) {treeData.forEach((item) => {if (item.children && item.children.length > 0) {getTreeLeaf(item.children, leafList);} else {leafList.push(item);}});} else {if (treeData.children && treeData.children.length > 0) {getTreeLeaf(treeData.children, leafList);} else {leafList.push(treeData);}}
}// 获取包含汉字的字符串的长度
function getStringSizeLength(string) {//先把中文替换成两个字节的英文，再计算长度return string.replace(/[\u0391-\uFFE5]/g, "aa").length;
}// 生成随机的字符串
function randomString(strLength) {strLength = strLength || 32;let strLib = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz";let n = "";for (let i = 0; i < strLength; i++) {n += strLib.charAt(Math.floor(Math.random() * strLib.length));}return n;
}// 获取字符串的像素宽度
function getPXwidth(str, fontSize = "12px", fontFamily = "Microsoft YaHei") {var span = document.createElement("span");var result = {};result.width = span.offsetWidth;result.height = span.offsetHeight;span.style.visibility = "hidden";span.style.fontSize = fontSize;span.style.fontFamily = fontFamily;span.style.display = "inline-block";document.body.appendChild(span);if (typeof span.textContent != "undefined") {span.textContent = str;} else {span.innerText = str;}result.width = parseFloat(window.getComputedStyle(span).width) - result.width;// 字符串的显示高度// result.height = parseFloat(window.getComputedStyle(span).height) - result.height;return result.width;
}
</script>
<style lang="scss" scoped>
.d3 {position: relative;overflow: hidden;width: calc(100%);min-height: 500px;overflow-x: scroll;.d3-content {position: absolute;width: max-content;::v-deep .custom-html {display: flex;div {i {font-size: 12px;margin-right: 4px;}&:nth-child(2) {margin-left: 10px;background: #f2faf7;border: 0.5px solid #c3e7da;border-radius: 4px;color: #00ab6b;font-size: 12px;padding: 0 4px;height: 20px;cursor: pointer;}}}}
}
</style>