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

已于 2022-02-16 15:36:36 修改
阅读量6k 收藏 24
点赞数
分类专栏： vue 文章标签： d3.js svg
于 2022-01-20 17:28:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdnyp/article/details/122604992
版权

概述

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

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

注意

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

代码

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>
    </div>
</template>

JavaScript

<script>
    export default {
        name: 'SvgDemo',
        props: {},
        data() {
            return {
                res: {
                    code: 200,
                    data: [{
                        name: "default",
                        devices: [
                            {
                                id: "3",
                                name: "Router",
                                ip: "169.254.200.2",
                                type: "router",
                                x: 400,
                                y: 50
                            },
                            {
                                id: "1",
                                name: "Linux",
                                ip: "192.168.67.101",
                                type: "server",
                                x: 52,
                                y: 500
                            },
                            {
                                id: "5",
                                name: "Winserver",
                                ip: "192.168.67.200",
                                type: "server",
                                x: 500,
                                y: 500
                            },
                            {
                                id: "4",
                                name: "SW",
                                ip: "192.168.67.201",
                                type: "switch",
                                x: 200,
                                y: 200
                            }
                        ],
                        relation: [
                            {source: "3", target: "4", network: "Net-CSRiface_1"},//连线——————source:起点，target（目标）：终点
                            {source: "1", target: "4", network: "Net-SWiface_16"},
                            {source: "5", target: "4", network: "Net-R4iface_0"}
                        ]
                    }]
                },
                topoNodes: [], // topo图中的节点
                topoLinks: [], // topo图中的连线
                isMove: true,// 操作模式，默认为移动。可切换为连接模式
                positions: [],//更改的位置
                token: null
            }
        },

        computed: {
            // 动态计算节点间的连线
            lines() {
                let hash = {}
                const OFFSET = 20
                this.topoNodes.forEach((item, index) => {
                    hash[item.id] = index
                })
                /*
                    hash:{
                        1: 1
                        3: 0
                        4: 3
                        5: 2
                     },

                     source:3 1 5,
                     target:4 4 4
                 */
                return this.topoLinks.map(item => {
                    const startNode = this.topoNodes[hash[Number(item.source)]]
                    const endNode = this.topoNodes[hash[Number(item.target)]]
                    return {
                        x1: startNode.x + OFFSET,
                        y1: startNode.y + OFFSET,
                        x2: endNode.x + OFFSET,
                        y2: endNode.y + OFFSET,
                    }
                })
            }
        },
        created() {
            this.token = sessionStorage.getItem("token");
            this.getData();
        },
        methods: {
            getData() {
                //使用模拟数据
                /*this.topoNodes = this.res.data[0].devices;
                this.topoLinks=this.res.data[0].relation;
                for (let item of this.topoNodes) {
                    item.symbol = require(`@/assets/images/${item.type}.svg`);
                }
                for (let item of this.topoLinks) {
                    item.source = Number(item.source);
                    item.target=Number(item.target);
                }
                console.log(this.topoNodes)*/

                //使用接口返回数据
                this.$axios({
                    url: window.config.Login_URL + "/mirror/spaces/topology", //topology
                    method: "GET",
                    headers: {
                        MyToken: this.token,
                    },
                    data: {
                        status: this.value,
                    },
                })
                    .then((res) => {
                        if (res.data.code === 200) {
                            this.topoNodes = res.data.data[0].devices;
                            this.topoLinks = res.data.data[0].relation;
                            for (let item of this.topoNodes) {
                                item.symbol = require(`@/assets/images/${item.type}.svg`);
                            }
                            for (let item of this.topoLinks) {
                                item.source = Number(item.source);
                                item.target = Number(item.target);
                            }
                            //console.log('初始数据',this.topoNodes)
                        }
                    })
                    .catch(() => {
                        this.$message.error("获取失败");
                    });
            },

            //移动事件
            moveAndLink(index, e) {
                // 判断当前模式
                if (this.isMove) {
                    // 移动模式
                    const layerX = e.layerX - this.topoNodes[index].x;
                    const layerY = e.layerY - this.topoNodes[index].y;

                    //实时获取更新后的坐标
                    document.onmousemove = (e) => {
                        this.topoNodes[index].x = e.layerX - layerX;
                        this.topoNodes[index].y = e.layerY - layerY;
                    }
                    //将新坐标存进数据库
                    //如果使用模拟数据，删除该方法
                    document.onmouseup = () => {
                        this.positions = [];
                        for (let j = 0; j < this.topoNodes.length; j++) {
                            this.positions.push({
                                'ip': this.topoNodes[j].ip,
                                'x': this.topoNodes[j].x,
                                'y': this.topoNodes[j].y
                            })
                        }
                        this.$axios({
                            url: window.config.Login_URL + "/mirror/spaces/topology",
                            method: "POST",
                            headers: {
                                MyToken: this.token,
                            },
                            data: {
                                positions: this.positions,
                            },
                        })
                            .then(() => {
                            })
                            .catch(() => {
                            });
                        document.onmousemove = null
                        document.onmouseup = null
                    }

                } else {
                    document.onmousemove = null // 重置鼠标移动事件
                    this.isMove = true // 重置为移动模式
                }
            },

            // 放大缩小
            zooming(){
                var svg = this.$d3.select('#svg');
                var zoom = this.$d3.zoom().scaleExtent([0.4, 5]).on("zoom", function (e) {
                    svg.selectAll('g').attr('transform',e.transform);
                    svg.selectAll('line').attr('transform',e.transform)
                });
                svg.call(zoom)
            }
        }
    }
</script>

CSS

<style scoped>
    .content {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .topo {
        width: 1070px;
        height: 600px;
    }
</style>
Vue使用vis实现拓扑图
m0_51431448的博客
05-10 8019
visjs官方文档visjs示例 1. 安装 npm install vis 2. 封装成组件 <template> <div :id="id" style="width: 100%; height: 100%"></div> </template> <script> import vis from "vis"; let options; export default { data() { return { .
Morris遍历（二叉树）
嗷嗷嗷嗷的博客
09-24 340
中序遍历 对于每一个节点来说： 如果该节点没有左子树（如节点1，节点4），则直接打印该节点，然后转到右子节点。 如果有左子树（如节点3，节点5），则我们首先要找到该节点的前驱节点，（1是3的前驱，4是5的前驱），其实就是找左子树的最右节点，构建一个前驱节点到当前节点的连接，即将前驱节点的右子节点指向当前节点。 当我们第一次进入节点3、5时，我们会构建前驱节点到当前节点的连接；但是当我们从1、4节点利用我们第一次已经构建好的连接再次进入3、5时，我们可以通过是否已经构建过连接来判断这是第二次进入，如果是第
基于SVG的HTML5网络拓扑图搭建指南
gitblog_01233的博客
10-18 920
基于SVG的HTML5网络拓扑图搭建指南 topology 项目地址: https://gitcode.com/gh_mirrors/top/topology 项目基础介绍...
vue拓扑图组件
最新发布
bingbingyihao的博客
04-11 538
一个基于 Vue3 的拓扑图组件
vue+d3实现的拓扑图，可拖拽
09-19
vue+d3实现拓扑图，在里面的包含详情，节点的数据，线的数据等的
使用svg绘制网络拓扑图
weixin_36878452的博客
08-22 1317
网络拓扑图设计
vue结合D3.js做的动态的可交互的SVG图形组件
03-06
vue结合D3.js做的动态的可交互的SVG图形组件。 下面是其中的几行代码： data: { svg: undefined, point1Instance: undefined, // 两个主要端点之一 point2Instance: undefined, // 两个主要端点之一 pathInstance: undefined, // 两个端点之间的连线 point1X: 100, point1Y: 100, point2X: 300, point2Y: 300, innerCircle: 5, // 两个端点之间还有 5 个端点 otherInstance: [] // 其他端点实例 },
Vue项目中svg图的使用
热门推荐
quangezai666的博客
01-03 1万+
svg图是可缩放矢量图，在页面中使用可以很好的提高用户体验 1、使用传统的svg图： 首先新建一个svg.vue文件，在该文件中使用svg标签定义一堆svg图，再分别用symbol标签分别定义一个个svg图， 再使用id来标记各个svg图，最后在需要实用的地方使用use标签绑定每个id即可使用svg图 具体的制作svg图可以参考svg图相关文档 2、在这里主要介绍使用插件使用svg
D3.js实现拓扑图的示例代码
10-18
在本文中，我们将深入探讨如何使用D3.js库来创建拓扑图，这是一个常用于数据可视化，特别是网络架构和系统关系展示的工具。D3.js（Data-Driven Documents）是一个强大的JavaScript库，允许开发者直接操作DOM...
d3.js插件 拓扑图 动态增加、删除节点
05-08
2. **SVG画布**：d3.js使用SVG（可缩放矢量图形）作为其主要的绘图工具。我们需要创建一个SVG容器，作为拓扑图的画布。 3. **布局算法**：根据数据模型，选择合适的布局算法来确定节点的位置，如力导向布局、环形...
js和html5实现网络拓扑图
02-04
在IT领域，网络拓扑图是一种重要的工具，用于可视化网络结构和设备间的连接关系。本文将深入探讨如何利用JavaScript（JS）和HTML5技术，特别是借助Qunee库，来实现网络拓扑图的自动排列展示。 首先，HTML5是现代...
svg网络拓扑
12-24
这是一个前端可视化工程，包括网络拓扑、地理视图、动态图表。以上属于SVG技术。还包括rpg游戏角色AI寻路、数字雨特效等。
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
10-14
主要介绍了vue使用svg文件补充-svg放大缩小操作(使用d3.js)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
dragPoint.vue
05-21
该demo是优化之前拖拽的拓扑图移动鼠标卡顿的问题，由于只是demo页面，没上传整个项目所以里面的图片路径要改成本地项目图片。
svg和vml实现的拓扑图
09-19
可以兼容所有浏览器的网络拓扑图，可有承受500个节点的同时显示，节点的线条颜色可以根据实际情况来调整
VUE实现网络拓扑图动态线条绘制技术
1. **SVG或Canvas渲染技术**：网络拓扑图中的线条和节点通常使用SVG（Scalable Vector Graphics）或Canvas来绘制。SVG具有良好的分辨率无关性和样式可修改性，适合复杂图形的渲染；而Canvas则提供了更多底层操作，...
vue拓扑图
03-23
嗯，用户想在Vue中实现或者使用拓扑图。他们可能是在开发一个需要展示网络结构、流程图或者类似图形的应用。我需要先了解Vue中常用的图表库，以及是否有现成的拓扑图插件可用。 首先，用户提到的引用里有两个例子，...
vue 动态生成拓扑图
大家好，我是+V
11-11 8827
vue 动态生成拓扑图 横向拓扑 在 index.html 文件中引入文件。 <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet"> <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bkTopology-1.1/cs
vue+D3项目拓扑图缩放，拖拽，保存布局等
feiyang678966的博客
10-18 7197
注意：vue+D3里面的当数据更新的时候，需要先将之前的数据绘画的点清除 (选择所有的点清除，才可以重新绘画)，否则将会重新绘画两次，因为之前的数据渲染的视图并没有清除，这该d3和query功能差不多 ，都是原生js的一些封装，所以不会像那些表格插件一个，选择的时候，初始化一下。故这里需要手动初始化。 找了很多资料对vue+D3实现的这些拓扑图的代码比较， getLinksData:f...
基于vue的拓扑图绘制
12-06
基于Vue的拓扑图绘制是指使用Vue.js框架来创建和展示拓扑图。拓扑图通常用于表示网络、设备或其他复杂系统的结构关系。通过Vue.js，可以实现动态、可交互的拓扑图展示。 以下是一些实现基于Vue的拓扑图绘制的基本步骤： 1. **选择合适的库**：有许多开源库可以帮助你在Vue中绘制拓扑图，例如D3.js、GoJS和vis-network等。这些库提供了丰富的图形绘制和交互功能。 2. **安装和配置**：通过npm或yarn安装所选的库。例如，使用D3.js： ```bash npm install d3 ``` 3. **创建Vue组件**：在Vue组件中引入并使用选定的库。例如，使用D3.js创建一个简单的拓扑图： ```vue <template> <div ref="chart"></div> </template> <script> import * as d3 from &#39;d3&#39;; export default { name: &#39;TopologyChart&#39;, mounted() { this.createChart(); }, methods: { createChart() { const data = { nodes: [ { id: &#39;1&#39;, name: &#39;Node 1&#39; }, { id: &#39;2&#39;, name: &#39;Node 2&#39; }, { id: &#39;3&#39;, name: &#39;Node 3&#39; } ], links: [ { source: &#39;1&#39;, target: &#39;2&#39; }, { source: &#39;2&#39;, target: &#39;3&#39; }, { source: &#39;3&#39;, target: &#39;1&#39; } ] }; const svg = d3.select(this.$refs.chart) .append(&#39;svg&#39;) .attr(&#39;width&#39;, 500) .attr(&#39;height&#39;, 500); const link = svg.selectAll(&#39;line&#39;) .data(data.links) .enter() .append(&#39;line&#39;) .attr(&#39;stroke&#39;, &#39;black&#39;); const node = svg.selectAll(&#39;circle&#39;) .data(data.nodes) .enter() .append(&#39;circle&#39;) .attr(&#39;r&#39;, 20) .attr(&#39;fill&#39;, &#39;lightblue&#39;); node.append(&#39;title&#39;) .text(d => d.name); const simulation = d3.forceSimulation(data.nodes) .force(&#39;link&#39;, d3.forceLink(data.links).id(d => d.id).distance(100)) .force(&#39;charge&#39;, d3.forceManyBody()) .force(&#39;center&#39;, d3.forceCenter(250, 250)); simulation.on(&#39;tick&#39;, () => { link .attr(&#39;x1&#39;, d => d.source.x) .attr(&#39;y1&#39;, d => d.source.y) .attr(&#39;x2&#39;, d => d.target.x) .attr(&#39;y2&#39;, d => d.target.y); node .attr(&#39;cx&#39;, d => d.x) .attr(&#39;cy&#39;, d => d.y); }); } } }; </script> <style scoped> svg { border: 1px solid #ccc; } </style> ``` 4. **交互功能**：根据需要添加交互功能，例如节点拖拽、缩放、点击事件等。可以通过D3.js或其他库提供的API来实现这些功能。 5. **优化和扩展**：根据实际需求，优化拓扑图的性能和功能，例如数据动态更新、动画效果等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值