vue框架中刷新d3显示的图片及矩形

实验结果https://live.csdn.net/v/211947该实验的数据是基于人脸68个标志点的数据获取的，通过对标志点距离的计算，可以判定睁眼闭眼和张嘴闭嘴，图片和数据已经保存。

刷新的函数主要是利用setTimeout(function(), time)，通过设置更新时间，就可以对图片和矩形更新的时间进行控制。

最开始的时候，由于没有设置d3过渡属性，图片显示的过程很生硬，因此进行了改动（小组作业，跟队友学的），所有的函数都直接卸载了VUE框架的app.vue中。

（初始版本）

<template>
    <!--<h2><a href="https://d3js.org" target="_blank" >D3直方图@VUE3</a></h2>
    
    -->
   
    <div id="vir-chart-container" style="background-color:rgb(233, 245, 249);opacity:0.8"></div>
   
    
</template>


<script>
import { defineComponent } from 'vue';
import * as d3 from "d3";
import axios from "axios";

var  width=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth)*0.98;
var  height=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)*0.9;
		
var color=d3.scaleOrdinal(d3.schemeCategory10);
var count=0;


export default defineComponent({
    mounted() {      
        this.play(); 
        this.refresh();
    },
    methods:{
        refresh(){
            if(count<100){
                this.play();
                count+=1;
                setTimeout(this.refresh,500);
            }
        },
        
         play(){

            axios.get("../public/vir-exp.csv").then(res=>{ 

                var containerclear = d3.select("#vir-chart-container").select("svg").remove();

                var data=d3.csvParse(res.data);
                console.log(data[count]);
                
                var svg=d3.select("#vir-chart-container")
                      .append("svg")
                      .attr("width",width)
                      .attr("height",height);
                
                svg.append("image")
                    .attr("x", 300)
                    .attr("y", 200)
                    .attr("width", 400)
                    .attr("height", 400)
                    .attr("xlink:href","../mouth_eyes/"+count+".jpg")
                    .transition()
                    .ease(d3.easeCircleOut);

                svg
                    .append("rect")
                    .attr("x",width/2+100)
                    .attr("y",600-data[count]["eye_l_dist"]*15)
                    .attr("height",data[count]["eye_l_dist"]*15)
                    .attr("width",90)
                    .attr("fill","#48C9B0")
                    .transition()
                    .ease(d3.easeCircleOut);
                svg
                    .append("rect")
                    .attr("x",width/2+200)
                    .attr("y",600-data[count]["eye_r_dist"]*15)
                    .attr("height",data[count]["eye_r_dist"]*15)
                    .attr("width",90)
                    .attr("fill","#48C9B0")
                    .transition()
                    .ease(d3.easeCircleOut);
                svg
                    .append("rect")
                    .attr("x",width/2+300)
                    .attr("y",600-data[count]["mouth_dist"]*15)
                    .attr("height",data[count]["mouth_dist"]*15)
                    .attr("width",90)
                    .attr("fill","#48C9B0")
                    .transition()
                    .ease(d3.easeCircleOut);
                    ; 
                svg
                    .append("text")
                    .attr("x",width/2+100)
                    .attr("y",630-data[count]["eye_l_dist"]*15)
                    .text(data[count]["eye_l_dist"])
                    .attr("dx",30)
                    .attr("font-size",26)
                    .attr("fill","red")
                    ;  
                svg
                    .append("text")
                    .attr("x",width/2+200)
                    .attr("y",630-data[count]["eye_r_dist"]*15)
                    .text(data[count]["eye_r_dist"])
                    .attr("dx",30)
                    .attr("font-size",26)
                    .attr("fill","red")
                    ;  
                svg
                    .append("text")
                    .attr("x",width/2+300)
                    .attr("y",630-data[count]["mouth_dist"]*15)
                    .text(data[count]["mouth_dist"])
                    .attr("dx",30)
                    .attr("font-size",26)
                    .attr("fill","red")
                    ;   
                svg
                    .append("text")
                    .attr("x",width/2+310)
                    .attr("y",630)
                    .text("嘴唇差距")
                    .attr("font-size",20)
                    ; 
                svg
                    .append("text")
                    .attr("x",width/2+210)
                    .attr("y",630)
                    .text("右眼差距")
                    .attr("font-size",20)
                    ; 
                svg
                    .append("text")
                    .attr("x",width/2+110)
                    .attr("y",630)
                    .text("左眼差距")
                    .attr("font-size",20)
                    ; 
                
              }
            ) 
        }  
    
    }
  }
)
</script>

（最终版本）

<!--<template>
  <HelloWorld />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>-->
<template>
  <h1>{{ msg }}</h1>
  <div id="chart-container" class="chart"></div>
  <button id="index" name="index" @click="refreshData">开始动画</button>
</template>

<script>
import { ref } from 'vue'
import * as d3 from "d3";
import axios from "axios";
import { defineComponent } from '@vue/runtime-core';
var height=window.innerHeight*0.80;
var width=window.innerWidth*0.9;
var BoxWidth=width*0.3;
var BoxHeight=height*0.85;
document.documentElement.style.setProperty('--BoxWidth', width);
document.documentElement.style.setProperty('--BoxHeight', height);
var svg,g,rectTran1,rectTran2,rectTran3,imageTran;
var rect1,rect2,rect3,image;
var textTran1,textTran2,textTran3;
var count=0;
var texts=["左眼","右眼","嘴巴"];
var text1,text2,text3;
export default {
    name: 'BarChart',
    props: {
    msg: String
    },
    mounted() {  
        svg=d3.select("#chart-container")
              .append("svg")
              .attr("id","hist")
              .attr("width",width)
              .attr("height",height);   
        this.showFace(count); 
        // this.refreshData(count);     
    },
    methods:{
      showFace(count){
        //  d3.select("#chart-container").transition();
        //  d3.select("#chart-container").selectAll("image").remove();
         g=svg.append("g").attr("transform",`translate(${700},${60})`);
         axios.get('../public/vir-exp.csv').then(res=>{
            var data= d3.csvParse(res.data)
            console.log(data);
            rect1=g.append("rect")
                .attr("x",0)
                .attr("y",BoxHeight-data[count]["eye_l_dist"]*10)
                .attr("width",BoxWidth/3-5)
                .attr("height",data[count]["eye_l_dist"]*10)
                .attr("fill","#48C9B0")
                .attr("transform",`translate(${0},${-40})`);
            rect2=g.append("rect")
                .attr("x",BoxWidth/3)
                .attr("y",BoxHeight-data[count]["eye_r_dist"]*10)
                .attr("width",BoxWidth/3-5)
                .attr("height",data[count]["eye_r_dist"]*10)
                .attr("fill","#48C9B0")
                .attr("transform",`translate(${0},${-40})`);
            rect3=g.append("rect")
                .attr("x",BoxWidth/3*2)
                .attr("y",BoxHeight-data[count]["mouth_dist"]*10)
                .attr("width",BoxWidth/3-5)
                .attr("height",data[count]["mouth_dist"]*10)
                .attr("fill","#48C9B0")
                .attr("transform",`translate(${0},${-40})`);

          
              
            g.selectAll("text")
               .data(texts)
               .enter()
               .append("text")
               .text(function(d,i){return d})
               .attr("x",function(d,i){return BoxWidth/3*i+BoxWidth/9;})
               .attr("y",function(d,i){return BoxHeight-16;})
               .attr("font-size",25)
               .attr("stroke","black")
               .attr("stroke-width",0.7)
               .transition()
               .delay(200)
               .duration(200);
            
             
             text1=g.append("text")
                .attr("x",0)
                .attr("y",BoxHeight-data[count]["eye_l_dist"]*10)
                .attr("width",BoxWidth/3-5)
                .attr("height",data[count]["eye_l_dist"]*10)
                .attr("fill","coral")
                .attr("dx",50)
                .attr("transform",`translate(${0},${-40})`)
                .text(data[count]["eye_l_dist"])
                .attr("font-size",26);
            text2=g.append("text")
                .attr("x",BoxWidth/3)
                .attr("y",BoxHeight-data[count]["eye_r_dist"]*10)
                .attr("width",BoxWidth/3-5)
                .attr("height",data[count]["eye_r_dist"]*10)
                .attr("fill","coral")
                .attr("dx",50)
                .attr("transform",`translate(${0},${-40})`)
                .text(data[count]["eye_r_dist"])
                .attr("font-size",26);
             text3=g.append("text")
                .attr("x",BoxWidth/3*2)
                .attr("y",BoxHeight-data[count]["mouth_dist"]*10)
                .attr("width",BoxWidth/3-5)
                .attr("height",data[count]["mouth_dist"]*10)
                .attr("fill","coral")
                .attr("dx",50)
                .attr("transform",`translate(${0},${-40})`)
                .text(data[count]["mouth_dist"])
                .attr("font-size",26);

            image=svg.append("image")
               .attr("href","../public/mouth_eyes/"+count+".jpg")
               .attr("x",20)
               .attr("y",50)
               .attr("width",512)
               .attr("height",512)
               .style("border-radius",2+"px");
              //  .style("filter", "url(#drop-shadow)");
         })
      },
      trans(count){
        axios.get('../public/vir-exp.csv').then(res=>{
          var data1= d3.csvParse(res.data)
          
          rectTran1 = rect1.transition()
                          .duration(300)
                          .attr("y",BoxHeight-data1[count+1]["eye_l_dist"]*10)
                          .attr("height",data1[count+1]["eye_l_dist"]*10 );
          rectTran2 = rect2.transition()
                          .duration(300)
                          .attr("y",BoxHeight-data1[count+1]["eye_r_dist"]*10)
                          .attr("height",data1[count+1]["eye_r_dist"]*10 );
          rectTran3 = rect3.transition()
                          .duration(300)
                          .attr("y",BoxHeight-data1[count+1]["mouth_dist"]*10)
                          .attr("height",data1[count+1]["mouth_dist"]*10 );


          textTran1 = text1.transition()
                          .duration(300)
                          .attr("y",BoxHeight-data1[count+1]["eye_l_dist"]*10)
                          .attr("height",data1[count+1]["eye_l_dist"]*10 )
                          .text(data1[count+1]["eye_l_dist"]);
          textTran2 = text2.transition()
                          .duration(300)
                          .attr("y",BoxHeight-data1[count+1]["eye_r_dist"]*10)
                          .attr("height",data1[count+1]["eye_r_dist"]*10 )
                          .text(data1[count+1]["eye_r_dist"]);
          textTran3 = text3.transition()
                          .duration(300)
                          .attr("y",BoxHeight-data1[count+1]["mouth_dist"]*10)
                          .attr("height",data1[count+1]["mouth_dist"]*10 )
                          .text(data1[count+1]["mouth_dist"]);

          svg.append("image")
            //  .attr("href","http://localhost:8090/mouth_eye/1.jpg")
              .attr("href","../public/mouth_eyes/"+count+".jpg")
              .attr("x",20)
              .attr("y",50)
              .attr("width",512)
              .attr("height",512)
              .style("border-radius",2+"px");
        })
      },
      refreshData(){
        if(count<51){
          // this.showFace(count)
          this.trans(count);
          console.log(count); 
          count+=1;
          setTimeout(this.refreshData, 500);
        }
      }

    }
}
// this.showFace();
</script>

<style scoped>
a {
  color: #42b983;
}
.chart{
  position: relative;
  /* padding: 5px; */
  box-shadow: 5px 5px 10px 0.1px #00000053;
  border-radius: 5px;
  margin-left:5%;
  /* margin-top:1%; */
  margin-bottom: 1%;
  width:calc(var(--BoxWidth)*1px);
  height:calc(var(--BoxHeight)*1px);
}

</style>