Updating style of path within svg and d3

Question

I'm trying to update the style of a path element within a svg.

(tl;dr): I just want to highlight the fill and/or stroke of the country that is clicked on from the list.

The svg is a world map with many path nodes:

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

With the above html , I'm trying to adjust the styling of a specific <path> element when the user clicks on the country's name from a list. I'm returning that country class ('NZL') to match the country that was clicked to the <path> element with the same class.

Once that is done, I just want to highlight or change the style of the clicked country's path but nothing is working.

Here's what I have:

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

All of these work in the sense that they are applied to the element. If I console.log(this) in the above function, here is what is shown:

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

All of the styles are shown as added to the element but nothing is having any effect on the actual display. What am I missing here?

UPDATE Big thanks to @Shashank! The solution was to move the data object out of the init() function in the Datamap initializer to a variable data . By doing that we have access to data outside of init() .

Thus, we can alter the data object's fillKey value along with triggering the map rotation at the same time on click using this:

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

Sweetness.

Answer 1

Full answer (all credit to @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);
})

That's it.