Карты данных D3, изменяющие ширину границы при наведении мыши

Question

Я пытаюсь сделать комбинированную визуализацию карты / диаграммы. Я хочу иметь возможность навести указатель мыши / выбрать страну на карте, и эффект должен применяться не только к стране, но и к линии на графике, представляющей данные страны (независимо от того, скажем, прирост населения за последнее десятилетие),

в done раздел инициализации карты, я использую обратный вызов highlightMap и передать в стране имя. Теоретически это также будет вызвано диаграммой, когда я наведу курсор мыши на это.

Вопросы: 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
        ...
    }
}

Answer 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;
}