- 下定决心,好好过一天~
这里我的d3是v7版本,框架使用的是vue框架。可以只看methods中写的代码即可
这里还有点小毛病,暂未解决
源代码
<template>
<div id="clockChartsD3" width=600 height=600></div>
</template>
<script>
import * as d3 from "d3"
var svg;
var timeText;
var interval;
export default {
name:"clockChartsD3",
mounted(){
this.clockChartsD3();
// interval = setInterval(timeText.text(getTimeString()),1000);
},
created(){
},
methods:{
clockChartsD3(){
svg = d3.select("#clockChartsD3")
.append("svg")
.attr("width",600)
.attr("height",600);
timeText = svg.append("text")
.attr("x",100)
.attr("y",100)
.attr("class","time")
.text(getTimeString());
function getTimeString(){
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
return hours + ":" + minutes + ":" + seconds;
}
function updateTime(){
timeText.text(getTimeString());
}
interval = setInterval(updateTime(),1000);
}
}
}
</script>
<style>
.time{
font-family: cursive;
font-size: 40px;
stroke: black;
stroke-width: 2;
}
</style>