我正在尝试更新 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);
})
甜度。
最佳答案
完整答案(所有归功于@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);
})
就是这样。
关于javascript - 更新 svg 和 d3 中的路径样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52897301/