svg地图数据可视化鼠标操作事件函数

简介: svg地图数据可视化鼠标操作事件函数
  • 地图对应的数据
    /*svg地图*/
    var classObj = [
        {name: "qingqi", place: "青岐村委", color: "#f6510d", orgTotal: 987, orgPerson: "张三丰"},
        {name: "mumian", place: "木棉村委", color: "#a07000", orgTotal: 187, orgPerson: "乔峰1"}
    ];
  • 执行操作事件
    //执行操作事件;
    for (var i = 0; i < classObj.length; i++) {
        (function () {
            var option = "." + classObj[i].name;
            var color = classObj[i].color;
            var place = classObj[i].place;
            var orgTotal = classObj[i].orgTotal;
            var orgPerson = classObj[i].orgPerson;
            $(option).each(function (index, element) {
                element.onmouseover = function () {
                    var className = "." + this.className.animVal;
                    $(className).each(function (index, elem) {
                        elem.style.fill = "#031a78";
                        $(className).filter("text")[0].style.fill = "#fff";
                    })
                    //显示当前区域信息;
                    $("#tips").css("display", "block");
                    $("#orgName").html(place);
                    $("#orgTotal").html(orgTotal);
                    $("#orgPerson").html(orgPerson);
                }
                element.onmouseout = function () {
                    this.style.fill = color;
                    var className = "." + this.className.animVal;
                    $(className).each(function (index, elem) {
                        elem.style.fill = color;
                        $(className).filter("text")[0].style.fill = "#fff";
                    })
                    //隐藏当前区域信息;
                    $("#tips").css("display", "none");
                }
            });
        })(i)


Done!

相关文章
|
3月前
|
数据可视化
R语言多图合成:优雅地在一个画布上展示多个图形
【8月更文挑战第30天】R语言提供了多种方法来实现多图合成,从基础的`par()`函数到高级的`gridExtra`、`ggplot2`和`cowplot`包,每种方法都有其独特的优势和应用场景。通过掌握这些技术,你可以根据实际需求灵活地组合图形,从而更高效地展示和解读数据。希望本文能为你提供一些有益的参考和启示。
|
30天前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
371 0
|
JavaScript 数据可视化 前端开发
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
266 1
|
数据可视化 前端开发 搜索推荐
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
279 0
|
前端开发 定位技术
Echarts地图高级开发:下钻交互菜单操作按钮(1)
Echarts地图高级开发:下钻交互菜单操作按钮(1)
121 0
|
6月前
|
数据可视化
宜搭dataV的ECHART图形控件加载数据源,怎样设置才能够实现两个曲线对比分析
宜搭dataV的ECHART图形控件加载数据源,怎样设置才能够实现两个曲线对比分析
|
6月前
|
数据可视化
Echarts5.3.2可视化案例-时间轴动态柱形图
Echarts5.3.2可视化案例-时间轴动态柱形图
|
6月前
|
数据可视化 定位技术 数据格式
Tableau可视化设计案例-07 多边形地图和背景图地图
Tableau可视化设计案例-07 多边形地图和背景图地图
|
数据可视化 JavaScript 定位技术
漏刻有时数据可视化Echarts组件开发(7):geo地图map3D组件的定时高亮轮播的解决方案1
漏刻有时数据可视化Echarts组件开发(7):geo地图map3D组件的定时高亮轮播的解决方案1
293 0
Echarts实战案例代码(24):柱图数据顶部显示图片的解决方案
Echarts实战案例代码(24):柱图数据顶部显示图片的解决方案
304 0
Echarts实战案例代码(24):柱图数据顶部显示图片的解决方案