vue使用svg文件补充-svg放大缩小操作(使用d3.js)


Posted in Javascript onSeptember 22, 2020

前言

项目需求是要引入svg文件,然后对里面的元素进行赋值,完了之后还要能够让svg放大缩小,点击查看全屏。针对上一篇文章,进行对svg文件里面的元素进行赋值和放大缩小的补充笔记

svg元素赋值

1. 先看看svg文件的代码

vue使用svg文件补充-svg放大缩小操作(使用d3.js)

思路:我的想法就是循环拿到里面的id,然后跟后台的数据匹配,然后赋值。因为后台返回的数据id是没有后面的_C和_V 的。所以需要我前端的处理。

2. 前端js代码:

onWinResize(item) { // item是后台返回的数据,我数据处理函数是单独写的,没有放在接口请求后面
      var svg = document.getElementById('svgcanvas'); // svg 的id
      var arrText = []; 
      var arrRect = []; //这两个是我们要赋值和要改变颜色的数组
      for (var i = 0; i < svg.childNodes.length; i++) {
        var child = svg.childNodes[i]; // 循环svg里面的元素
        if (child.tagName == 'g' && child.id != null && child.id.length > 0) { // 找到g元素,然后循环g里面的元素。(如果你的svg里面没有用g元素包裹你的text、line、rect等元素的话,那你直接跳过这一步,走下一步就好了)
          var childG = child.childNodes; 
          for (var k = 0; k < childG.length; k++) { // 循环g里面的元素
            if (childG[k].tagName == 'text' && childG[k].id != null && childG[k].id.length > 0) {
              arrText.push(childG[k].id); //拿到后台返回的text的id
            } else if (childG[k].tagName == 'rect' && childG[k].id != null && childG[k].id.length > 0) {
              arrRect.push(childG[k].id); //拿到后台返回的rect的id
            }
          }
        }
      }
      //循环后台返回的数据,与拿到的svg里面的元素id进行匹配
      for (let j = 0; j < item.length; j++) {
        var eltext = item[j].SvgPtID + '_V';
        var elrect = item[j].SvgPtID + '_C';
        arrText.forEach(i => {
          if (eltext == i) {
            var el = document.getElementById(eltext);
            el.innerHTML = item[j].YCValue; //赋值
            el.attributes.fill.value = '#000';
          }
        })
        arrRect.forEach(v => {
          if (elrect == v) {
            $('#' + elrect).css('fill', '#7ab900') // 改变颜色(记得要安装jQuery插件,引入jQuery)
          }
        })
      }
    },

3.附上效果图

vue使用svg文件补充-svg放大缩小操作(使用d3.js)

放大缩小

这个也是折腾了一波,才做出来的。主要svg文件的操作,貌似做的不多,基本都是svg简单的icon或者img的使用。也是百度看了好多才找到d3这个插件的。

D3.js堪称SVG中的jQuery,让SVG图操作起来更加灵活,更加方便调试。反正就是爱了,爱了。

简单的介绍一下d3.js

D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准,可以不需要其他任何框架独立运行在现代浏览器中,它结合强大的可视化组件来驱动 DOM 操作。

D3 可以将数据绑定到 DOM 上,然后根据数据来计算对应 DOM 的属性值。例如你可以根据一组数据生成一个表格。或者也可以生成一个可以过渡和交互的 SVG 图形。

D3 不是一个框架,因此也没有操作上的限制。没有框架的限制带来的好处就是你可以完全按照自己的意愿来表达数据,而不是受限于条条框框,非常灵活。D3 的运行速度很快,支持大数据集和动态交互以及动画。

此处应附上官网地址:https://www.d3js.org.cn/

想要多了解和学习的可以去看看,很容易理解。

好了,回归正题。vue里面首先要安装d3这个插件

1. npm i d3 --save

2. import * as d3 from "d3"; //在vue文件里面引入d3

1、npm i d3 --save

2、import * as d3 from "d3"; //

3、然后就是界面上的使用了 我们项目的需求是鼠标滚动控制放大缩小,so: html:

vue使用svg文件补充-svg放大缩小操作(使用d3.js)

js:

zoomimg() {
      // 放大缩小
      var svg = d3.select("#svgcanvas");
      svg.call(
        d3.zoom().scaleExtent([0.5, 2]).on("zoom", zoom)
      );
 
      function zoom() {
        d3.select(this).selectAll("g").attr("transform", d3.event.transform);
      }
    }

就这么简单,解决了...

svg全屏

这个就相对简单一点,废话不说多,上代码

html:

<div class="full-screen">
 <!-- <el-tooltip effect="dark" :content="fullscreen ? ``:`全屏`" placement="bottom"></el-tooltip> -->
 <i class="iconfont iconFullScreen" style="font-size: 24px;" @click="handleFullScreen"></i>
 <span v-if="fullscreen">取消全屏</span>
 <span v-else>全屏</span>
</div>
// data里面fullscreen:false
 handleFullScreen() {
  let element = document.documentElement;
    if (this.fullscreen) {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    } else {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        // IE11
        element.msRequestFullscreen();
      }
    }
    this.fullscreen = !this.fullscreen;
  }

这个只是F11全屏的效果,要是直接是单独整一个界面的话,建议还是用路由跳转吧!

以上这篇vue使用svg文件补充-svg放大缩小操作(使用d3.js)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现图片切换的幻灯片效果源代码
Dec 12 Javascript
无刷新预览所选择的图片示例代码
Apr 02 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
js实现异步循环实现代码
Feb 16 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
JavaScript正则表达式验证登录实例
Mar 18 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 #Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 #Javascript
Js跳出两级循环方法代码实例
Sep 22 #Javascript
vue 二维码长按保存和复制内容操作
Sep 22 #Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 #Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 #Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 #Javascript
You might like
PHP动态输出JavaScript代码实例
2015/02/12 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
js校验开始时间和结束时间
2020/05/26 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
pandas通过loc生成新的列方法
2018/11/28 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
Python2与Python3的区别实例分析
2019/04/11 Python
python中def是做什么的
2020/06/10 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
Html5之title吸顶功能
2018/06/04 HTML / CSS
请说出以下代码输出什么
2013/08/30 面试题
副总经理工作职责
2013/11/28 职场文书
通用自荐信范文
2014/03/14 职场文书
出生公证委托书
2014/04/03 职场文书
政府个人对照检查材料
2014/08/28 职场文书
合作协议书模板2014
2014/09/26 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
公司酒会主持词
2015/07/02 职场文书
《所见》教学反思
2016/02/23 职场文书
python 命令行传参方法总结
2021/05/25 Python