vue使⽤svg⽂件补充-svg放⼤缩⼩操作（使⽤d3.js）
前⾔svg图形
项⽬需求是要引⼊svg⽂件，然后对⾥⾯的元素进⾏赋值，完了之后还要能够让svg放⼤缩⼩，点击查看全屏。针对上⼀篇⽂章，进⾏对svg⽂件⾥⾯的元素进⾏赋值和放⼤缩⼩的补充笔记
svg元素赋值
1. 先看看svg⽂件的代码
思路：我的想法就是循环拿到⾥⾯的id，然后跟后台的数据匹配，然后赋值。因为后台返回的数据id是没有后⾯的_C和_V 的。所以需要我前端的处理。
2. 前端js代码：
onWinResize(item) { // item是后台返回的数据，我数据处理函数是单独写的，没有放在接⼝请求后⾯
var svg = ElementById('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 = ElementById(eltext);
el.innerHTML = item[j].YCValue; //赋值
el.attributes.fill.value = '#000';
}
})
arrRect.forEach(v => {
if (elrect == v) {
$('#' + elrect).css('fill', '#7ab900') // 改变颜⾊（记得要安装jQuery插件，引⼊jQuery）
}
})
}
},
3.附上效果图
放⼤缩⼩
这个也是折腾了⼀波，才做出来的。主要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 的运⾏速度很快，⽀持⼤数据集和动态交互以及动画。
想要多了解和学习的可以去看看，很容易理解。
好了，回归正题。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:
js:
zoomimg() {
// 放⼤缩⼩
var svg = d3.select("#svgcanvas");
svg.call(
<().scaleExtent([0.5, 2]).on("zoom", zoom)
);
function zoom() {
d3.select(this).selectAll("g").attr("transform", ansform);
}
}
就这么简单，解决了...
svg全屏
这个就相对简单⼀点，废话不说多，上代码
html：
<div class="full-screen">
<!-- <el-tooltip effect="dark" :content="fullscreen ? ``:`全屏`" placement="bottom"></el-tooltip> -->
<i class="iconfont iconFullScreen" @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 (itFullscreen) {
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (CancelFullScreen) {
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (questFullscreen) {
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (RequestFullScreen) {
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
}
this.fullscreen = !this.fullscreen;
}
这个只是F11全屏的效果，要是直接是单独整⼀个界⾯的话，建议还是⽤路由跳转吧！
以上这篇vue使⽤svg⽂件补充-svg放⼤缩⼩操作(使⽤d3.js)就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。