JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

<script src="https://d3js.org/d3.v4.min.js"></script>


<svg>
    <g class="datamaps-subunits">
        <path class="datamap-subunit AFG" d="M10 10 H 30 V 30 H 10 L 10 10"></path>
        <path class="datamap-subunit AGO" d="M50 50  H 90 V 90"></path>
        // paths for every country
        <path class="datamap-subunit NZL" d="M350 150  H 90 V 90" 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>

JavaScript

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

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

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