Question

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

（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的值，并在单击的同时触发地图旋转：

$('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);
})

就是这样。

在SVG和D3中更新路径的样式

1 个答案: