angularjs - d3 datamaps 美国州地图单击时仅重绘单个州

Question

我正在使用 datamaps 库使用 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);
        });
    }
});

我正在考虑使用 done 回调（如上所示）来设置数据图的投影。但它目前似乎不起作用。

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