在Vue3.0里面动态创建svg(d3.js)

前言

要做动态渲染svg的效果, 在网上查了好多资料,(都没有vue3的版本), 有很多的地方都是坑, 写了也用不了, 所以我自己整合了一下。

vue3+js,没有用到ts

1. 首先定义一个svg, <svg>我是直接写死的,一个大容器嘛。

我差不多把能写的属性都写进去, 这个<defs>我看到有帖子说要加的, 但是可加可不加, 我也没有用到过。

里面 id="rectold" 这里开始我都是动态去渲染的。

<svg ref="svgcanvas" id="svgcanvas"

height="76vh" width="90%"

viewBox="0 0 600 1100"

version="1.1" x="0px" y="0px"

xml:space="preserve" xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

@mousewheel.prevent="zoomimg"

>

<defs>

<marker

id="end-arrow1"

class="end-arrow"

fill="#008CFF"

markerUnits="strokeWidth"

viewBox="0 0 10 10"

refX="9"

refY="3.5"

markerWidth="10"

markerHeight="10"

orient="auto"

>

<polygon points="0 0, 10 3.5, 0 7" />

</marker>

</defs>

<g ref="image" transform="translate(0,0) rotate(0)" id="rectold">

<g id="btectBord" />

<g id="columnText" />

<g id="lattice" />

<g id="linetitle" />

<g id="layertitle" />

</g>

</svg>

2. 引入d3.js, 我是根据d3来实现的, 还有可以用其他的,我没去研究了。

首先下载d3依赖: npm install d3 --save-dev

然后再main.js里面定义

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

import * as d3 from 'd3'
app.config.globalProperties.$d3 = d3
window.d3 = d3 //暂时设置为全局变量

最后在组件里面引入进来

题外: jquery和echarts的引入是一样的方法。

<script>

import {

defineComponent,

getCurrentInstance,

onMounted,

reactive,

ref,

toRefs,

onBeforeMount,

} from 'vue'

import * as d3 from 'd3'

<script>

3. 先定义数据 ,这一步平平无奇

setup() {
const state = reactive({

                locationcolumn: 18, //列

                locationline: 10, //行

                locationlayer: 8, //层

                locationData: [], //获取数据

})
}

4. @mousewheel.prevent="zoomimg"放大缩小拖拽的鼠标事件, 然后不知道vue3什么原因,死活定义不了这个方法, 后面是加了prevent这个之后才可以使用的。

什么原因还不太清除, 有知道的大佬可以告诉我一下下。

setup() {

        const state = reactive({

                locationcolumn: 18, //列

                locationline: 10, //行

                locationlayer: 8, //层

                locationData: [], //获取数据

        })

        // 这个方法还没有完全搞懂, 但是有效

        const zoomimg = e => {

        // 放大缩小

        var svg = d3.select('#svgcanvas')

        svg.call(

        d3

        .zoom()

        .extent([

        [0, 0],

        [600, 1100],

        ])

        .scaleExtent([0.1, 100]) // 缩小放大的区间

        .on('zoom', zoomed)

        )

                function zoomed({ transform }) {

                let g = d3.selectAll('g') // 查找所有的<d>

                let text = d3.selectAll('text') // 查找所有的<text>

                let rect = d3.selectAll('rect') // 查找所有的<rect> (我用到的所有标签我都查了一遍)

               rect.attr('transform', transform) // 给他定义属性就可以方法缩小了

                text.attr('transform', transform)

                }

        }

         const svgcanvas = ref(null) // 这里需要ref一下

        return { ...toRefs(state), zoomimg, svgcanvas } // 统一return, 没毛病

}

5. 动态创建每一列的框框<rect> , 外边框

var rectX = 280

var rectY = 0 // 变化的值

var svgRect = d3.select('#btectBord')

let Yitem = ''

svgRect

.append('rect')

.attr('fill', '#ccc') // 定义颜色

.attr('width', 756)

.attr('height', 200)

.attr('x', rectX) // 变化的值在这里横向的

.attr('y', Yitem) // 变化的值在这里竖向的

.attr('stroke', 'black')

.attr('stroke-width', 2)

.attr('rx', 8)

.attr('ry', 8)

6. 动态创建每一列的文字<text>

var textY = 100 // 变化的

var transform = 'rotate(0)'

var textSvg = d3.select('#columnText') // 列

textSvg

.append('text')

.attr('x', 100) // 横向的位置

.attr('y', Ycolumn) // 竖向的位置

.attr('font-family', 'Arial')

.attr('font-size', '40px') // 字体

.attr('transform', transform)

.attr('id', `columnitem${i}`) // id要是不唯一的, 可以放在列循环里面

// 重点!!!!!!!!!!

// 自定义text里面的内容

let textnode = document.getElementById(`columnitem${i}`)

textnode.textContent = i + '列'

7. 动态创建每一层的文字, <text>

var layerY = 320 //层的竖轴

var layerX = 240 //层的横轴

在Vue3.0里面动态创建svg(d3.js)

悦读