如何在国家地图中添加悬停效果或鼠标悬停/鼠标输入效果？答案

【问题标题】：How to add hover effect or mouseover/mousenter effect in a country map?如何在国家地图中添加悬停效果或鼠标悬停/鼠标输入效果？
【发布时间】：2020-08-16 04:40:28
【问题描述】：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
</head>
<body style="text-align:center;">
<div id="app" >
  <svg ref="svg" height="600" width="1300">
   <path
     v-for="(state, index) in stateData"
     :d="pathGenerator(state.feature)"
     :style="{
       fill: state.color,
       stroke: 'darkslategray'
     }"  @mouseover="updateDetails(index)">
   </path>

 </svg>
</div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.0.0/fetch.min.js.map"></script>

    <script src="sample.js"></script>

    </body>
    </html>

var app = new Vue({
  el: "#app",
  data: {
    selectedState:0,
    statesJson: {
 "here I i uploaded the map data in .json format"},
  methods:{
    updateDetails:function(index)
    {
      this.selectedState = index
    //  return this.statesJson.features[this.selectedState].id
      console.log(this.selectedState)
      console.log(this.statesJson.features[this.selectedState].id)

    }
  },

  computed: {
    // Typical projection for showing all states scaled and positioned appropriately
    projection () {
      return d3.geoMercator().scale(900).translate([-500, 600])
    },

  /* updateName(){
      return this.statesJson.features[this.selectedState].id
      console.log(this.selectedState)
    },*/

    // Function for converting GPS coordinates into path coordinates
    pathGenerator () {
      return d3.geoPath().projection(this.projection)
    },

    // Combine the states GeoJSON with a rank-based gradient
    stateData () {
      return this.statesJson.features.map(feature => {
        
        return {
          feature,
          color: this.stateColor(feature.rank)
        }
      })
    },


    // Interpolate from red to green in the domain 50 to 1 (our ranking)
    stateColor () {
      return d3.scaleSequential().domain([50,1]).interpolator(d3.interpolateRdYlGn)
    }

  }
})

在此代码中，我想创建悬停效果以查看任何人将鼠标光标悬停在状态上时的详细信息。

出于试用目的，我已经嵌入了数据，但我会使用一些 api 上传它。谁能告诉我如何创建这种效果？

作为着色状态基础的状态等级也在 statesJson 中。

【问题讨论】：

可能是我，但是当我运行 sn-p 时，我在控制台中收到一堆错误和一个空白页
因为我没有在 statesJson 中添加数据。如果你愿意，我可以给你那个 .json 文件，我从中复制了数据。

标签： javascript html css vue.js

【解决方案1】：

也许这是更好的解决方案：Interactive map in vue with svg.js

上一篇文章：

你可以做这个

const states = document.querySelectorAll("#svg path");
states.forEach(function(el) {
    el.addEventListener("mouseenter", function() {
        // show data box
    });
    el.addEventListener("mouseleave", function() {
        // Remove data box
    });
});

你的svg

<svg id="svg" ref="svg" height="600" width="1300">
    <g id="states">
        <path v-for="..."></path>
    </g>
 </svg>

更好，你可以create your own directive显示盒子并在其他项目或分享中再次使用它

<svg ref="svg" height="600" width="1300">
    <g id="states">
        <path v-for="..." v-map-data="data"></path>
    </g>
 </svg>

【讨论】：

你能告诉我这段代码中的 'svgStates' 指的是什么吗？
我认为给定的解决方案有一些错误。请确保它工作正常并回复。我已经检查过了，但它不起作用。
是的，有一个错误（已修改），但这个工作正常codepen example
你能告诉我应该在“//显示数据框”和“//删除数据框”的地方写什么来解决我的问题吗？
这取决于你想要做什么，el 包含你悬停的路径元素，你可以更新它的属性来改变颜色，或缩放或任何东西。如果你想显示一个带有数据的框，你可以看this example。当路径悬停并且框跟随光标时，它会显示一个带有数据的框