d3交互 （键盘事件）

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

这里我的d3是v7版本，框架使用的是vue框架。可以只看methods中写的代码即可

因为d3的v7版本中的不能使用d3.event了，问题还没有解决
源代码

<template>
  <div id="KeyboardD3" width=600 height=600></div>
</template>

<script>
import * as d3 from "d3"
export default {
    name:"KeyboardD3",
    mounted(){
        this.KeyboardD3();
    },
    methods:{
        KeyboardD3(){
            
            //keydown 按下任意键触发，按住不放会重复触发此事件，不区分大小写字母
            //keypress 按下字符键触发，按住不放会重复触发此事件，区分大小写字母
            //keyup 按键释放触发，不区分大小写

            var dataAll = ["A","S","D","F"];
            var svgWidth = 600,svgHeight = 600;
            var svg = d3.select("#MouseD3")
                        .append("svg")
                        .attr("width",svgWidth)
                        .attr("height",svgHeight);

            var rects = svg.selectAll("rect")
                            .data(dataAll)
                            .enter()
                            .append("rect")
                            .attr("x",function(d,i){
                                return 100*i;
                            }) 
                            .attr("y",function(d,i){
                                return 100;
                            })
                            .attr("width",100)
                            .attr("height",150)
                            .attr("fill","balck");

            var texts = svg.selectAll("text")
                            .data(dataAll)
                            .enter()
                            .append("text")
                            .attr("x",function(d,i){
                                return 100*i;
                            })
                            .attr("y",function(d,i){
                                return 150;
                            })
                            .attr("dx",10)
                            .attr("dy",25)
                            .attr("fill","white")
                            .attr("font-size",24)
                            .text("text",function(d,i){
                                return d;
                            });
            
            d3.select("body")
                .on("keydown",function(){
                    rects.attr("fill",function(d){
                        if(d == String.fromCharCode(d3.event.keyCode)){
                            return "stellblue";
                        }
                        else{
                            return "black";
                        }
                    });
                    // console.log(d3.event);
                })
                .on("keyup",function(){
                    rects.attr("fill","black");
                });
        }
    }
}
</script>

<style>

</style>