Как сделать карту красочной по данным в Vue? - PullRequest
Новая
       19

Как сделать карту красочной по данным в Vue?

0 голосов
/ 16 июня 2020

Я хочу сделать карту цветной в соответствии со свойством data "1999-00" data свойства stateStats Data. Я использую для этого библиотеку d3 и создал функцию stateColor, но не знаю, что мне добавить в аргумент в stateColor, чтобы сделать карту красочной.

Свойство stateStats data содержит много элементов словари, но здесь я упомянул только 3, например. 

   var app = new Vue({
      el: "#app",
      data(){
        return {
                statesJson: null,
                stateStats : [{"State":"Andaman & Nicobar Islands","1999-00":"45"},
                             {"State":"Andhra Pradesh","1999-00":"27"},
                             {"State":"Arunachal Pradesh","1999-00":"9"}]
                }
             },
        methods:{
          axiosCall() {
               axios.all([axios.get('https://raw.githubusercontent.com/smlab-niser/CRiAPGraph/master/India.json')])
              .then(axios.spread((user1) => (
               this.statesJson=user1.data
      )))
              .catch(error => {
               console.log(error)
      })
    },    
        },
        computed: {
        // Typical projection for showing all states scaled and positioned appropriately
        projection () {
          return d3.geoMercator().scale(900).translate([-1030, 700])
        },

        // Function for converting GPS coordinates into path coordinates
        pathGenerator () {
          var path= d3.geoPath().projection(this.projection)
          return path
        },
            // Combine the states GeoJSON with a rank-based gradient
        stateData () {
          return this.statesJson ? this.statesJson.features.map(feature => {
            //let state = this.happiestStates.find(state => state.state === feature.id)
            return {
              feature,
              color:this.stateColor()
            }
          }):[]
        },
            // Interpolate from red to green in the domain 50 to 1 (our ranking)
        stateColor () {
          return d3.scaleSequential().domain([50, 1]).interpolator(d3.interpolateRdYlGn)
        }
       },
     
      created:function(index){
            this.axiosCall();
          },
     })
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <div id="app">
            <div>
                <svg id="svg" ref="svg" height="600" width="510">
                    <path class="bar" v-for="(state, index) in stateData" :d="pathGenerator(state.feature)" :style="{
           fill: state.color,
           stroke: 'darkslategray'
         }">
                    </path>
                </svg>
            </div>
         </div>
...