700字范文 > 【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能

【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能

时间：2022-03-31 00:25:11

前言概述技术介绍实现过程插件安装引用组件初始化组件实现效果简单理解使用d3创建一个svg在svg中提添加元素函数使用使用总结说在最后

前言

概述

最近项目开发过程中，前端需要有一个图片预览的组件，支持图片放大、缩小、拖拽等地图的基本功能，并且需要考虑后期扩展，可以在预览过程中添加标注。最初觉得这得用操作地图的插件才可以搞定，但仅仅是图片预览，没必要这样处理，于是就选用的d3.js来实现这一功能，发现完全满足所有的需求。

项目用的前端还是vue+elementui全家桶的模式，发现elementui本身就有一个图片预览的组件，个人觉得不是特别好用，有感兴趣的人可以去看看。

vue项目图片预览组件：

基于element-ui中自带的一个组件（el-image-viewer）vue图片预览组件（viewerjs ）

技术介绍

很多人对d3.js的印象是一个前端的可视化库，与hightchart、echarts等差不多是一样，但是随着使用的进一步深入，就会发现d3的功能不仅于此。前面那chart类库局限的地方在于基本不可定制，即不同的图表必须严格按照文档来；而D3呢，你说了算，你想画出什么样的图，你说了算，自由度很大；当然最终还是需要根据项目需求选择。

回归正题，D3.js堪称SVG中的jQuery，你如果想用D3输出Canvas图也可以，但SVG图操作起来更加灵活，更加方便调试，基于这个思路，就萌生出使用d3.js操作svg，加载图片显示，实现其它组件不具备的能力。

实现过程

插件安装

npm install d3 --save-dev

需要注意的是，默认安装的应该是最新版本，其中有很多函数的调用逻辑会有变化，尤其是大版本不同的时候，本人就遇到因为版本问题很多函数不起作用的问题，所以最好注意安装后版本。

本人使用的5.5.0版本，不同版本说明d3.js版本说明，安装方法：

npm install d3@5.5.0 --save-dev

引用组件

在组件（单vue文件）中引用

import * as d3 from "d3";

之后就可以在方法中直接使用。

2.注册到全局变量，在main.js中引入

import * as d3 from "d3";Vue.prototype.$d3 = d3;window.d3 = d3; //暂时设置为全局变量

初始化组件

import * as d3 from "d3";export default {name: "ViewImage",data() {return {zoom_:null,svg_:null,container:null,svg_width:500,svg_height:500};},mounted() {this.hwInit();this.svgInit();},created() {},methods: {/** 动态获取svg面板的宽高*/hwInit:function(){this.svg_width = window.innerWidth-260;this.svg_height = window.innerHeight -120;},/** 初始化svg面板*/svgInit: function () {this.zoom_ = d3.zoom().scaleExtent([0.5, 3]).on("zoom", this.zoomed);this.svg_ = d3.select("#img_content").append("svg").attr("width", this.svg_width).attr("height", this.svg_height).call(this.zoom_);this.container = this.svg_.append("g").attr("fill","#ffffff");},/** 定义缩放的方法*/zoomed: function (e) {this.container.attr("transform","translate(" +d3.event.transform.x +"," +d3.event.transform.y +")scale(" +d3.event.transform.k +")");},/** 在svg上绘制图片*/drawImg:function(bg_img){this.container.attr("class", "all").append("image").attr("xlink:href", bg_img).attr("x", "0").attr("y", "0").attr("width",this.svg_width).attr("height",this.svg_height);},},};

至此，在页面中即可对应实现不同的业务了。

实现效果

底图是一张png的图片，通过d3+svg加载之后，获取对应点的坐标生成数据，既可以实现相应的效果，顺便说一句，d3操作svg有很多方法，需要慢慢摸索，所以最好了解svg本身有的属性会事半功倍。

简单理解

基于从网上查询的资料结合开发中的思考，简单记录一下个人理解：

使用svg加载图片，是因为svg会给图片建立一个坐标空间，所有绘制的图形都是基于这个坐标空间来处理。为什么要使用d3.js呢？svg虽然有坐标空间，不支持缩放拖拽等功能，且d3能在代码中操作svg，从而可以实现编程式的开发。

有了以上两点，其实就不难看出为什么会这样去组合使用了，目前也在论证是否使用别的js库能达到同样的效果，以下就分别讲解下d3操作svg的一些思路：

使用d3创建一个svg

var svgContainer = d3.select("body").append("svg").attr("width",200).attr("width",200).style("border","1px solid black");

以上代码就是创建了一个200*200的svg面板。

在svg中提添加元素

暂且较原生添加svg元素：

<svg width="50" height="50"><circle cx="25" cy="25" r="25" fill="purple" /></svg>

使用d3.js添加svg元素：

var circleSelection = svgSelection.append("circle").attr("cx",25).attr("cy",25).attr("r",25).style("fill","purple");

实现了同样的效果，其中，.attr(“cx”,25)和.attr(“cy”,25)让我们可以设置SVG圆形的属性。

函数使用

D3.js允许我们在.style()操作符和.attr()内部使用函数,比如：

var circleAttributes = circles.attr("cx",function(d){return d;}).attr("cy",function(d){return d;}).attr("r",20).style("fill",function(d){return d;});

以此，我们就可以很轻松的实现以下定制化的需求。