| | |
| | | <div class="image-container"> |
| | | <img class="top-image" src="../../assets/images/zhang.png" alt="Top Image"> |
| | | </div> |
| | | |
| | | |
| | | <superMindmap v-if="showMindMap" :active='active' :data="mapData" @activeChange="activeChange"/> |
| | | <superMindmap v-if="showMindMap" :active='active' :data="mapData" @activeChange="activeChange" class="mind-map-container"/> |
| | | |
| | | </div> |
| | | </template> |
| | |
| | | } |
| | | ) |
| | | }, |
| | | |
| | | |
| | | setGreeting() { |
| | | const currentTime = new Date(); |
| | |
| | | return data; |
| | | }, |
| | | |
| | | drawMindMap() { |
| | | const mindMapData = this.rootList[0]; // 从rootList中获取数据 |
| | | console.log(mindMapData) |
| | | // 清除现有的SVG元素 |
| | | // d3.select("#mind-map svg").remove(); |
| | | |
| | | // // 创建一个新的 div 元素作为包裹思维导图的容器 |
| | | // const mindMapContainer = document.createElement("div"); |
| | | // mindMapContainer.setAttribute("id", "mind-map-container"); |
| | | // mindMapContainer.style.position = "absolute"; |
| | | // mindMapContainer.style.top = "0"; |
| | | // mindMapContainer.style.left = "0"; |
| | | // mindMapContainer.style.width = "100%"; |
| | | // mindMapContainer.style.height = "100%"; |
| | | // mindMapContainer.style.zIndex = "1"; |
| | | |
| | | // // 将思维导图容器插入到 image-container 中 |
| | | // document.querySelector(".image-container").appendChild(mindMapContainer); |
| | | |
| | | // // 创建SVG元素,设置宽度和高度 |
| | | // const svg = d3.select("#mind-map-container") |
| | | // .append("svg") |
| | | // .attr("class", "svg-container") // 添加 className |
| | | // .attr("width", "100%") |
| | | // .attr("height", "100%"); |
| | | |
| | | // // 创建根节点 |
| | | // const root = d3.hierarchy(mindMapData); |
| | | // const treeLayout = d3.tree().size([500, 400]); // 设置树状布局的尺寸 |
| | | // treeLayout(root); |
| | | |
| | | // // 创建链接线 |
| | | // svg.selectAll(".link") |
| | | // .data(root.descendants().slice(1)) |
| | | // .enter() |
| | | // .append("path") |
| | | // .attr("class", "link") |
| | | // .attr("d", d => { |
| | | // return "M" + d.x + "," + d.y + "C" + (d.x + d.parent.x) / 2 + "," + d.y + " " + |
| | | // (d.x + d.parent.x) / 2 + "," + d.parent.y + " " + d.parent.x + "," + d.parent.y; |
| | | // }); |
| | | |
| | | // // 创建节点 |
| | | // const nodes = svg.selectAll(".node") |
| | | // .data(root.descendants()) |
| | | // .enter() |
| | | // .append("g") |
| | | // .attr("class", "node") |
| | | // .attr("transform", d => "translate(" + d.x + "," + d.y + ")"); |
| | | |
| | | // nodes.append("circle") |
| | | // .attr("r", 10); |
| | | |
| | | // nodes.append("text") |
| | | // .attr("dx", 12) |
| | | // .attr("dy", 5) |
| | | // .text(d => d.data.nickName); |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | |
| | | } |
| | | |
| | | .image-container { |
| | | position: absolute; |
| | | width: 100%; |
| | | height: 100%; |
| | | /*position: absolute;*/ |
| | | position: fixed; |
| | | margin-left: -10px; |
| | | width: 90%; |
| | | height: 90%; |
| | | z-index: -1; |
| | | } |
| | | |
| | | .mind-map-container{ |
| | | z-index: 2; |
| | | opacity: 0.5; |
| | | opacity: 0.8; |
| | | /*margin-top: 200px;*/ |
| | | background-color: transparent; |
| | | } |
| | | .top-image { |
| | | width: 100%; |
| | |
| | | position: static; |
| | | opacity: 0.8; |
| | | } |
| | | |
| | | |
| | | |
| | | </style> |