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中的运用上部
Nov 20 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
使用Javascript简单计算器
Nov 17 Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
JavaScript获取URL参数的方法分享
Apr 07 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
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
Yii框架form表单用法实例
2014/12/04 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
Python制作词云的方法
2018/01/03 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
python类的实例化问题解决
2019/08/31 Python
python一些性能分析的技巧
2020/08/30 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
学习交流会主持词
2014/04/01 职场文书
实习公司领导推荐函
2014/05/21 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
师德培训心得体会2016
2016/01/09 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL