0

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

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

问题：1）在highlightMap我尝试获取国家元素并更改其边框宽度时不起作用。获取地图子单元并对其应用效果的正确方法是什么？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
        ...
    }
}
4

1 回答 1

1

整理你的选择器：.datamaps-subunit 与 #datamaps-subunit 不同

此外，每个国家几何都有一个带有国家代码的附加类（如“ESP”或“USA”）

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

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

使用select()或selectAll()取决于您期望获得多少元素（一个或可能多个）

编辑：一个更简单的选择是简单地将此规则添加到您的 CSS 表中：

.datamaps-subunit:hover {
  stroke-width: 2px;
}
于 2016-01-12T11:45:45.507 回答