Wie kann ich Ländercodes in d3 mit JQuery zurückgeben?

Question

Sehr geehrte Kollegen Programmierer,

Ich habe eine Frage zu d3 und JQuery. Im folgenden Code verwende ich Daten, um eine d3 Weltkarte zu färben, die ich von http://datamaps.github.com/scripts/datamaps-all.js erworben habe. Ich muss sicherstellen, dass, wenn der Benutzer auf eines der Länder klickt, es die Landesvorwahl dieses Landes (3 Buchstaben, zum Beispiel: NLD) zurückgibt, damit ich es für andere Funktionen verwenden kann. Jede Hilfe würde sehr geschätzt werden!

$("#container1").datamap({ 
scope: 'world', 
done: $(function(datamap) { 
    datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) { 
    var countryData = mapData[geography.id]; 
}), 
geography_config: { 
borderColor: 'rgba(255,255,255,0.3)', 
highlightBorderColor: 'rgba(0,0,0,0.5)', 
popupTemplate: _.template([ 
    '<div class="hoverinfo">', 
    '<% if (data.name) { %> <strong><%= data.name %></strong><br/><% } %>', 
     '<% if (data.GDP) { %>', 
     'GDP per capita: <strong><%= data.GDP %><strong><br/> <% } %>', 
     '</div>' 
     ].join('')) 
}, 
fills: { 
A: '#fdd0a2', 
B: '#fdae6b', 
C: '#fd8d3c', 
D: '#f16913', 
E: '#d94801', 
F: '#a63603', 
G: '#7f2704', 
defaultFill: 'grey' 
}, 
data: { 
    "QAT": { 
    "name": "Qatar", 
    "fillKey": "G", 
    "GDP": "140649.2" 
    }, 
    "": { 
    "name": "Gambia", 
    "fillKey": "A", 
    "GDP": "1630.5" 
    }, 
    "LUX": { 
    "name": "Luxembourg", 
    "fillKey": "G", 
    "GDP": "98459.5" 
    }, 
    "SGP": { 
    "name": "Singapore", 
    "fillKey": "F", 
    "GDP": "82763.0" 
    }, 
.... 

Answer 1

prüfen this codepen für ein funktionierendes Beispiel, klicken Sie auf ein Land und Sie erhalten eine Benachrichtigung mit dem Ländernamen und ISO-Code. Es verwendet jQuery nicht, aber es sollte Ihnen helfen herauszufinden, welche Variablen im DONE-Callback verwendet werden sollen.

Sie sollten wahrscheinlich http://datamaps.github.io/scripts/datamaps.world.min.js statt http://datamaps.github.io/scripts/datamaps-all.js verwenden. Wenn es einen Grund gibt, warum Sie datamaps-all.js verwenden, lassen Sie es mich bitte wissen.

Javascript in dem DONE Callback:

done: function(datamap) { 
    datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) { 
    var message = geography.properties.name + ' has a country code of ' + geography.id; 
    console.log(message); 
    alert(message); 
    }); 
} 

HTML Referenzierung das Skript verwende ich:

<script src="http://datamaps.github.io/scripts/datamaps.world.min.js"></script> 

sowie Ihre popupTemplate Eigenschaft überprüfen, hier gehört mir:

popupTemplate: function(geo, data) { 
    return data && data.GDP ? 
    '<div class="hoverinfo"><strong>' + geo.properties.name + '</strong><br/>GDP per capita: <strong>' + data.GDP + '</strong></div>' : 
    '<div class="hoverinfo"><strong>' + geo.properties.name + '</strong></div>'; 
}