javascript - 更新 svg 和 d3 中的路径样式

Question

我正在尝试更新 svg 中路径元素的样式。

(tl;dr):我只想突出显示从列表中单击的国家/地区的填充和/或描边。

svg 是一张有很多路径节点的世界地图:

<svg>
    <g class="datamaps-subunits">
        <path class="datamap-subunit AFG"></path>
        <path class="datamap-subunit AGO"></path>
        // paths for every country
        <path class="datamaps-subunit NZL" data-info="{'fillKey':'partner'}" data-hasqtip="13" style="fill: rgb(184, 37, 47); stroke-width: 1; stroke-opacity: 1; stroke: rgb(253, 253, 253);"></path>
        ...
    </g>
</svg>

有了上面的html ，我正在尝试调整特定 <path> 的样式当用户从列表中点击国家名称时出现的元素。我正在返回该国家/地区类别('NZL')以匹配点击到 <path> 的国家/地区具有相同类的元素。

完成后，我只想突出显示或更改所点击国家/地区路径的样式，但没有任何效果。

这是我所拥有的:

$('.datamaps-subunit').each(function() {
    if ($(this).hasClass(country)) { // in this case country = NZL

        $(this).css({ fill: "rgb(0,0,0)" })
        $(this).attr('data-info', '{"fillKey":"partnerHighlight"}')
        $(this).addClass('partner-highlight')

        // trying another way
        d3.select('.' + country).style('stroke', 'rgb(0,0,0)')
    }
})

所有这些在应用于元素的意义上都是有效的。如果我console.log(this)在上面的函数中，这里显示的是:

<path class="datamaps-subunit NZL partner-highlight" 
    data-info="{'fillKey':'partnerHighlight'}" 
    data-hasqtip="13" 
    style="fill: rgb(0, 0, 0); stroke-width: 1; stroke-opacity: 1; stroke: rgb(0, 0, 0); background-color: rgb(0, 0, 0);" 
    aria-describedby="qtip-13">
</path>

所有样式都显示为已添加到元素，但对实际显示没有任何影响。我在这里缺少什么？

更新 非常感谢@Shashank!解决方案是移动 data init() 中的对象Datamap 中的函数变量的初始值设定项 data .通过这样做，我们可以访问 data在init()之外.

因此，我们可以改变 data对象的 fillKey使用此值并在单击时同时触发 map 旋转:

$('a[data-id]').on('click', function() {
    var long = $(this).data('longitude');
    var lat = $(this).data('latitude');
    var country = $(this).data('id');
    data[country].fillKey = data[country].fillKey === 'partner' ? 'partnerHighlight' : 'partner'; 
    rotate2Destination(long, lat, country);
})

甜度。

Answer 1

完整答案(所有归功于@Shashank):

// move data property to a variable outside of init()
var data = {
    ARG: { fillKey: "partner",}, // Argentina
    AUS: { fillKey: "partner" }, // Australia
    CHL: { fillKey: "partner" }, // Chile
    CHN: { fillKey: "partner" }, // China
    CRI: { fillKey: "partner" }, // Costa Rica
    DEU: { fillKey: "partner" }, // Germany
    HKG: { fillKey: "partner" }, // Hong Kong
    IND: { fillKey: "partner" }, // India
    IDN: { fillKey: "partner" }, // Indonesia
    ITA: { fillKey: "partner" }, // Italy
    JPN: { fillKey: "partner" }, // Japan
    KOR: { fillKey: "partner" }, // Republic of Korea
    MYS: { fillKey: "partner" }, // Malaysia
    MEX: { fillKey: "partner" }, // Mexico
    NZL: { fillKey: "partner" }, // New Zealand
    PAK: { fillKey: "partner" }, // Pakistan
    PAN: { fillKey: "partner" }, // Panama
    PER: { fillKey: "partner" }, // Peru
    PHL: { fillKey: "partner" }, // Philippines
    SGP: { fillKey: "partner" }, // Singapore
    ZAF: { fillKey: "partner" }, // South Africa
    THA: { fillKey: "partner" }, // Thailand
    VNM: { fillKey: "partner" }, // Viet Nam
    USA: { fillKey: "partner" }, // United States
}

// now we can access and alter the data even with a d3.redraw()
$('a[data-id]').on('click', function() {
    var long = $(this).data('longitude');
    var lat = $(this).data('latitude');
    var country = $(this).data('id');
    // th
    data[country].fillKey = data[country].fillKey === 'partner' ? 'partnerHighlight' : 'partner'; 
    rotate2Destination(long, lat, country);
})

就是这样。