d3交互 （鼠标事件）

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

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

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

<script>
import * as d3 from "d3"
export default {
    
    
    name:"MouseD3",
    mounted(){
    
    
        this.MouseD3();
    },
    methods:{
    
    
        MouseD3(){
    
    
            //过渡对象中没有on事件
            //this为事件被触发元素
            //click,点击
            //mouseover 在元素上
            //mouseout 移开
            //mousemove 鼠标移动
            //mousedown 鼠标按下
            //mouseup 鼠标松开
            //dblclick 双击
            //如果给同一事件添加多个监听器，可以加.后输入名称，否则要被覆盖,click.first   click.second
            //.on("click",null)删除监听器

            var svgWidth = 600,svgHeight = 600;
            var svg = d3.select("#MouseD3")
                        .append("svg")
                        .attr("width",svgWidth)
                        .attr("height",svgHeight)
            
            svg.append("rect")
                .attr("fill","steelblue")
                .attr("x",50)
                .attr("y",100)
                .attr("width",100)
                .attr("height",500)
                .on("mouseover",function(d,i){
    
    
                    d3.select(this)
                        .transition()
                        .duration(1000)
                        .attr("fill","yellow");
                })
                .on("mouseout",function(d,i){
    
    
                    d3.select(this)
                        .transition()
                        .duration(1000)
                        .attr("fill","steelblue");
                })
            

        }
    }
}
</script>

<style>

</style>