d3和vue结合实时显示攻击动画效果

一、安装
在vue项目中安装d3.js，使用命令：npm i d3 --save
二、使用
1、如果要全局使用，在main.js中引入
import * as d3 from “d3”;

Vue.prototype.$d3 = d3;
window.d3 = d3; //暂时设置为全局变量
2、在当前vue文件中使用
import * as d3 from ‘d3’
三、利用d3写攻击动画效果
效果：实时动态显示最新的几条数据，画出动画
1、创建svg,动态设置其宽高

 let width = document.getElementById('attack').offsetWidth;
 let height = document.getElementById('attack').offsetHeight;
 let svg = d3.select('body div.attackAnimation')//此处为宽度响应，高度写死
          .append('svg')
          .attr('width',width)
          .attr('height',300)
          .attr('viewBox',`0,0,${width},300`)
          .style('background','rgba(255,255,255,1)')

2、创建svg中的元素----创建svg图形分组调用
2.1起点标记：

let symnol = svg.append('symbol')
          .attr('viewBox','0 0 97 110.7')
          .attr('id','originS')
          .attr('fill','#E31C0C')
        symnol.append('path')
       .attr('d','M40.9 87.53s.69.29 1.08.39c0 0-.49-2.16-.78-3.53.09-.1-.4 1.87-.3 3.14zM42.86 61.73c-.39-.2-.78-.39-1.18-.59-.2 1.08-.39 5.69 0 7.36.2-1.27.69-4.41 1.18-6.77zM44.62 57.71c.39-.78.78-5.59.98-7.65-1.08 1.67-1.86 5-.98 7.65zM47.27 62.91c-.2 2.65.39 8.44.88 9.91.29-3.04.49-8.04.59-9.81-.39 0-.88-.1-1.47-.1zM41.58 94.4s.49.2.88.2c0 0-.29-1.67-.59-2.75-.19.39-.39 1.86-.29 2.55zM42.86 88.32s.98.39 1.57.49c0 0-.59-3.04-1.28-4.51 0-.01-.39 2.94-.29 4.02zM43.64 100.38s.49.2.98.39c-.29-.49-.49-1.67-.98-2.84-.1.39-.19 1.18 0 2.45zM44.33 62.32c-.29 3.04.1 8.63.49 10.1.2-3.34.59-8.14.98-9.81-.49-.09-.98-.19-1.47-.29zM43.84 91.65s-.49 2.26-.39 3.53c0 0 .88.29 1.28.39-.11-.39-.4-2.64-.89-3.92zM20.98 50.06c.49-1.37 1.86-3.53 3.92-3.92-.2-.39-.49-1.67-.29-2.55C28.34 38 31.18 32.7 27.06 27.9c1.86-.39 3.83-3.34 4.32-5.59.78-3.43-.59-10.2-3.34-12.46.1 2.45-.29 10.3-3.73 15.99 0 0-1.47.78-3.14.2-1.08-3.04-1.28-11.28.1-17.95-7.36 4.51-10.99 19.52-6.67 30.8-5.2-9.42-3.92-19.91.2-27.47-9.61 12.55-4.22 30.99 6.18 38.64zm7.85-36.29c.88 5.79-.1 10.59-3.34 11.77 1.67-3.63 2.85-7.95 3.34-11.77zM25.3 29.76c-1.37 2.16-2.26 4.71-2.65 7.26-.39-2.65.29-6.28 1.28-7.46.49 0 1.37.2 1.37.2zm-3.93-.69c.49-.1 1.28.29 1.28.29-1.18 2.06-1.77 4.02-1.96 5.4-.3-2.85.1-4.71.68-5.69zm-2.94-15.99c-2.55 5.89-4.12 13.93-2.65 23.35-3.63-9.23-1.47-19.23 2.65-23.35zm-.98 19.42c-1.47-2.84-1.08-7.85.39-9.91-.29 3.24-.49 7.46-.39 9.91z')
        symnol.append('path')
          .attr('d','M82.78 66.64c-.1.1-.59.29-1.37.69.1-.39.1-.78.1-1.28-1.28-.2-5.69-.88-7.75-.29-.1-.29-.29-.49-.49-.59-1.08.59-8.73 3.43-12.46 4.41-.1-1.08-.2-2.26-.39-3.34 2.55-.39 7.75-1.18 11.28-2.55V63c2.06 0 5.2-1.77 6.96-3.14 0 0 0-.59.1-.98 2.45.39 3.43-2.16 3.63-5.2-.59.69-1.86 1.67-4.41 2.84 0 0 .1.39 0 .98 0 0-.69-.49-1.47-.59-1.28 1.57-3.73 3.24-5.69 4.41 0 0-.49-.39-1.28-.78-1.86 1.37-5.98 2.55-9.61 2.94-.1-.29-.1-.69-.2-.98-.29-1.86-.69-3.73-1.08-5.4 4.9 1.57 16.77.29 18.64-4.51 1.47.1 3.53-1.77 4.61-3.04 1.08-1.28 6.67-6.47 6.77-17.56 0-10.