Question

我正在尝试组合地图/图表可视化工作。我希望能够在地图上鼠标悬停/选择一个国家，并且效果不仅适用于国家，还适用于代表国家数据的图表上的线条（无论如何，比如过去十年的人口增长）

在地图初始化的done部分，我使用回调highlightMap并传入countryName。当我将鼠标悬停在图表上时，理论上这也会被图表调用。

问题： 1）在highlightMap中，我尝试获取country元素并更改其边框宽度不起作用。什么是获取地图子单元并对其应用效果的正确方法？ 2）这是一般的正确方法吗？

var map;

function setupMap(mouseoverCallback, mouseoutCallback) {
    var width = mapWidth;
    var height = mapHeight;

    map = new Datamap({
        element: document.getElementById(mapContainerDiv),
        projection: 'mercator',
        // responsive: true,
        width: width,
        height: height,
        fills: {
            defaultFill: "#ffffff"
        },

        geographyConfig: {
            borderColor: '#000000',
        },
        data: {},
        done: function(datamap) {
            datamap.svg.selectAll('.datamaps-subunit').on('mouseover', function(geography) {
                var countryName = geography.properties.name;
                highlightMap(countryName);
            });
            datamap.svg.selectAll('.datamaps-subunit').on('mouseout', function(geography) {
                var countryName = geography.properties.name;
                highlightMap(countryName);
            });
        }
    });
}

function highlightMap(name, highlight) {
    var code = country2Code[name];

    if (highlight) {
        var countryElement = map.svg.select("#datamaps-subunit "+code);

        countryElement.attr('stroke-width', 10); // Change border of country to something nutty
        // reset color
        ...
    }
}

Answer 1

整理你的选择器： .datamaps-subunit与＃datamaps-subunit

不同

此外，每个国家/地区的几何图形都有一个附加类（如＃34; ESP＆＃34;或＆＃34; USA＆＃34;）和国家/地区代码

要稍后选择您使用的国家/地区map.svg.selectAll(".datamaps-subunit.ESP")或map.svg.selectAll(".datamaps-subunit.USA")

请注意，类名之间没有空格，因为它们应用于同一个SVG元素

使用select()或selectAll()取决于您希望获得的元素数量（一个或多个）

编辑：更简单的选择就是将此规则添加到CSS工作表中：

.datamaps-subunit:hover {
  stroke-width: 2px;
}

D3数据图在鼠标悬停时更改边框宽度

1 个答案: