d3交互（鼠标事件）

最新推荐文章于 2023-07-23 23:51:41 发布

鸣蜩二九~

最新推荐文章于 2023-07-23 23:51:41 发布

阅读量2.3k

点赞数

分类专栏： d3 文章标签：交互 javascript vue.js

本文链接：https://blog.youkuaiyun.com/moasad/article/details/120928234

版权

d3 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用D3.js v7创建一个SVG矩形，并添加鼠标悬停（mouseover）、离开（mouseout）时的色彩变化效果。通过示例代码展示了D3.js与Vue的集成方法，帮助读者理解如何在前端开发中实现图形的交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下定决心，好好过一天~

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