Load Popup auf Hover-Daten von JSON-Datei für Datamaps

Question

Die Datamaps "Getting started" Seite hat einen Abschnitt zum Anpassen des Textes, wenn ein Benutzer über ein bestimmtes Land schwebt. Aber sie tun dies durch Hartcodierung dieser Info:

<script> 
    var map = new Datamap({ 
     element: document.getElementById('container'), 
     fills: { 
      HIGH: '#afafaf', 
      LOW: '#123456', 
      MEDIUM: 'blue', 
      UNKNOWN: 'rgb(0,0,0)', 
      defaultFill: 'green' 
     }, 
     data: { 
      IRL: { 
       fillKey: 'LOW', 
       numberOfThings: 2002 
      }, 
      USA: { 
       fillKey: 'MEDIUM', 
       numberOfThings: 10381 
      } 
     }, 
     geographyConfig: { 
      popupTemplate: function(geo, data) { 
       return ['<div class="hoverinfo"><strong>', 
         'Number of things in ' + geo.properties.name, 
         ': ' + data.numberOfThings, 
         '</strong></div>'].join(''); 
      } 
     } 
    }); 
</script> 

Ich möchte, dass Informationen von einer externen .json-Datei laden, so dass ich es leicht aktualisieren. Wie kann ich das machen? Ich habe versucht, Einstellung dataURL, aber das erwartet eine vollständige Topojson-Datei, die ich nicht aktualisieren muss. Jede Hilfe sehr geschätzt!

Answer 1

dataUrl auf Root-Ebene eine json oder CSV-Datei nehmen, wie in diesem Beispiel hier: http://bl.ocks.org/markmarkoh/11331459

 var election = new Datamap({ 
     scope: 'usa', 
     element: document.getElementById('container1'), 
     geographyConfig: { 
      popupTemplate: function(geo, data) { 
      return data && data.info && "<div class='hoverinfo'><strong>" + data.info + "</strong></div>"; 
      }, 
      highlightOnHover: false, 
      borderColor: '#444', 
      borderWidth: 0.5 
     }, 
     dataUrl: 'data.json', 
     dataType: 'json', 
     data: {}, 
     fills: { 
      'Visited': '#306596', 
      'neato': '#0fa0fa', 
      'Trouble': '#bada55', 
      defaultFill: '#dddddd' 
     } 
     }); 

Während die Ressource auf data.json wie folgt aussieht:

{ 
    "NY": {"fillKey": "Visited", "anotherProperty": "Born here"}, 
    "TX": {"fillKey": "Visited", "anotherProperty": "Live here"}, 
    "CA": {"fillKey": "Visited", "anotherProperty": "Here while writing this code"} 
}