实验结果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>