- 下定决心,好好过一天~
这里我的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>