Carte D3js - Liste des pays sélectionnables

Question

Je suis en train de créer une carte de l'allemagne avec d3js pour visualiser quelques données. Maintenant, j'ai ajouté beaucoup de villes à ma carte, qui ouvre une infobulle avec des graphiques lorsque vous déplacez votre souris sur eux. Le problème est que la carte est un peu chaotique pour le moment. Par conséquent, je veux ajouter une liste de toutes les villes à côté de la carte où vous pouvez sélectionner la ville que vous voulez et puis il est mis en évidence dans la carte + l'info-bulle est affichée. Est-ce que anyboy a une idée de comment je peux y parvenir?

Answer 1

Vous pouvez créer une sélection d'entrée à l'aide d3 comme ceci:

// Create a div for the Input and its label 
d3.select('#selectContainer').append('div').attr('id','selection'); 
d3.select("#selection").append('div').attr("class",'labelSelect').html("Select a City:"); 

// Create the Select Input 
var refSelect = d3.select("#selection") 
     .append("select") 
     .attr('id','citySelect') 
     .on("change", changeCity); 

// Set the options for the Select Input 
var refOptions = refSelect.selectAll('option').data(allCityObjects); 
    refOptions.enter() 
     .append("option") 
     .attr("selected", function(d){ 
      // logic that returns true for the city that should initially be selected, if need-be 
     }) 
     .text(function(d) { return d.cityName; }); 

Cette fonction changeCity ressemblera probablement celui qui est appelé mouseover en ce moment beaucoup.

function changeCity() { 
    // Grab currently selected option 
    var s = d3.select(this); 
    var i = s.property("selectedIndex"); 
    var d = s.selectAll('option').data()[i]; 

    // Call function that shows Tooltip for specific city 'd' 

}