d3 时钟

• 下定决心，好好过一天~

这里我的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>