D3js map - список стран по выбору

Question

В настоящее время я создаю карту Германии с d3js для визуализации некоторых данных. Теперь я добавил на карту множество городов, которые открывают всплывающую подсказку с графикой, когда вы наводите на них курсор мыши. Проблема в том, что на данный момент карта немного хаотична. Поэтому я хочу добавить список всех городов рядом с картой, где вы можете выбрать нужный город, а затем он будет выделен на карте + появится всплывающая подсказка. У любого есть идея, как я могу достигнуть этого?

Answer 1

Вы можете создать выборочный ввод, используя d3 следующим образом:

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

Тот changeCity Функция, вероятно, будет во многом напоминать ту, которая вызывается при наведении мыши прямо сейчас.

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'

}