Как добавить эффект наведения или наведение курсора / мыши на карту страны? - PullRequest
Новая
       3

Как добавить эффект наведения или наведение курсора / мыши на карту страны?

0 голосов
/ 01 мая 2020 

<!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. Кто-нибудь может сказать, как создать этот эффект?

Ранг состояний, являющихся основой для окраски состояний, также принимается в состояниях Json.

1 Ответ

0 голосов
/ 01 мая 2020

Может быть, это лучшее решение: Интерактивная карта в vue с 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>

Лучше, вы можете создать свою собственную директиву , чтобы показать коробку и снова использовать ее в другом проекте или поделиться 

<svg ref="svg" height="600" width="1300">
    <g id="states">
        <path v-for="..." v-map-data="data"></path>
    </g>
 </svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...