D3js map - Selectable country list

Question

I'm currently creating a map of germany with d3js to visualize some data. Now I added a lot of cities to my map, which open a tooltip with some graphics when you move your mouse over them. The problem is that the map is a bit chaotic at the moment. Therefore, I want to add a list of all cities next to the map where you can select the town you want and then it's highlighted in the map + the tooltip is shown. Does anyboy have a idea how i can achieve this?

Answer 1

You can create a select Input using d3 like this:

// 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; });

That changeCity function will probably resemble the one that is being called on mouseover right now a lot.

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'

}