Я пытаюсь обновить стиль элемента path в 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().
. Таким образом, мы можем изменить значение fillKey объекта data вместе с одновременным запуском поворота карты при нажатии этой кнопки.:
$('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);
})
Сладость.