直接上代碼

//安裝
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>