d3.js - マウスオーバーで境界線の幅を変更するD3データマップ

Question

マップとチャートを組み合わせた視覚化を機能させようとしています。地図上で国をマウスオーバー/選択して、その国だけでなく、その国のデータを表すグラフの線にも効果を適用したいと考えています (過去 10 年間の人口増加としましょう)。 .

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
        ...
    }
}