d3 datamaps美国州地图仅在点击时重绘个别状态

Question

我使用数据图库使用d3.js显示美国地图

我想只在点击时显示一个状态。如何使用d3或datamaps库执行此操作？

var map = new Datamap({
    element: document.getElementById('container'),
    done: function(datamap) {
        datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
            alert(geography.properties.name);
        });
    }
});

我正在考虑使用完成回调（上面显示的示例）来设置数据映射的投影。但它目前似乎并没有起作用。

Answer 1

这样的事情：

 datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
                datamap.svg.selectAll('.datamaps-subunit')
                        .style('display', function(d){
                            return d.id === geography.id ? 'initial' : 'none'
                        });
                datamap.svg.selectAll('.datamaps-arc')
                        .style('display', function(d){
                            //
                        });
                datamap.svg.selectAll('.datamaps-bubble')
                        .style('display', function(d){
                            //
                        });
            });