Question

我目前正在使用d3js创建德国地图，以显示一些数据。现在我在我的地图上添加了很多城市，当你将鼠标移到它们上面时，会打开带有一些图形的工具提示。问题是目前地图有点混乱。因此，我想添加地图旁边所有城市的列表，您可以在其中选择所需的城镇，然后在地图中突出显示该工具提示。 anyboy是否知道如何实现这一目标？

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'

}

D3js地图 - 可选择的国家/地区列表

1 个答案: