vue使用svg画拓扑图（关系图）拖拽缩放

原创

已于 2022-02-16 15:36:36 修改 · 6.3k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#d3.js #svg

于 2022-01-20 17:28:26 首次发布

本文分享了使用SVG实现拓扑图的过程，包括解决echarts中存在的拖拽bug问题，最终采用d3.js实现拓扑图的缩放和平移功能，并提供了完整的代码示例。

概述

项目刚开始用的echarts画的拓扑图，echarts有个关系图可以直接画出来，但是上个前端在拖拽功能上留了bug，我眼睛都快看瞎了，都没找出来哪里出问题，还找了各种文章借鉴学习都没搞定

后来跑到gitHub上面找了个大神写的拓扑，根据他的代码改好了，不过他用的svg画的图，所以我这份记录也是svg

注意

数据从后端获取，模拟数据已经提供，修改getData()中代码就行
缩放功能用到了d3，先安装npm install d3 --save-dev，main.js中引入 import * as d3 from 'd3'; Vue.prototype.$d3 = d3
图片自己随便弄，注意图片名字和后缀名就行

代码

HTML

<template>
    <div class="content">
        <!--拓扑存放位置-->
        <svg
                class="topo"
                id="svg"
                ondragover="return false"
                oncontextmenu="return true"
                @mousewheel="zooming"
        >
            <!-- 已连接的线 -->
            <line
                    v-for="(item) in lines"
                    :key="item.x"
                    :x1="item.x1" :y1="item.y1"
                    :x2="item.x2" :y2="item.y2"
                    style="stroke:rgb(214,214,218);stroke-width:2"/>

            <g
                    v-for="(item, index) in topoNodes"
                    :key="item.id"
                    @mousedown.left.stop.prevent="moveAndLink(index, $event)"
            >
                <image :xlink:href="item.symbol" width="50px" height="50px" :x="item.x" :y="item.y"></image>
                <text :x="item.x + 25" :y="item.y + 66" style="text-anchor: middle; user-select: none;">
                    {
  
  {item.name}}
                </text>
            </g>
        </svg