我正在嘗試應用滑鼠懸停功能，為未懸停的元素添加不透明度。
我有一個帶有區域的 SVG 地圖，我當前的函式將 0.8 不透明度應用于所選區域。
我正在嘗試反轉它，因此其他區域是獲得應用 0.8 不透明度的區域
這是我的代碼：
function render(svg) {
d3.select("body").node().append(svg.documentElement)
data.forEach(d => {
d3.selectAll(`g[aria-label="${d.id}"]`)
.datum(data)
.selectAll('path')
.style("fill", colorScale(d.value))
.on('mouseover', function() {
d3.selectAll(`g[aria-label="${d.id}"]`)
.filter(function(e) {
return e.id !== d.id
})
.style('opacity', 0.8)
})
.on('mouseout', function() {
d3.selectAll(`g[aria-label="${d.id}"]`)
.style('opacity', 1)
})
})
我認為通過添加e.id !==d.id會做到這一點，但會產生相反的效果
我的小提琴：jsfiddle
uj5u.com熱心網友回復：
e.id是undefined因為e必然data。考慮使用這個選擇器：
g[aria-label]:not([aria-label="${d.id}"])
其中說選擇所有g元素，aria-label但不選擇aria-label等于的元素d.id
作業示例 - 我習慣于mouseenter最小化事件觸發和 0.5 不透明度效果：
var data = [{
"id": "Scotland ",
"value": 5000
},
{
"id": "Wales ",
"value": 3000
},
{
"id": "Ireland ",
"value": 750
},
{
"id": "North West ",
"value": 1250
},
{
"id": "North East ",
"value": 4500
},
{
"id": "East Midlands ",
"value": 2000
},
{
"id": "South East ",
"value": 350
},
{
"id": "South West ",
"value": 6000
},
{
"id": "East of England ",
"value": 4000
},
{
"id": "West Midlands ",
"value": 2500
},
{
"id": "Northern Ireland ",
"value": 1000
},
{
"id": "Isle of Man ",
"value": 3000
},
{
"id": "Yorkshire and the Humber ",
"value": 1500
},
{
"id": "Greater London ",
"value": 5000
}
];
var colorScale = d3
.scaleLinear()
.domain(d3.extent(data, (d) => d.value))
.range(["#5C4D87", "#EC4E6B"])
.interpolate(d3.interpolateHcl)
const svgUrl = "https://raw.githubusercontent.com/gangrel11/samplefiles/main/amCharts.pixelMap.svg";
d3.xml(svgUrl).then(render);
function render(svg) {
d3.select("body").node().append(svg.documentElement);
data.forEach(d => {
d3.selectAll(`g[aria-label="${d.id}"]`)
.datum(data)
.selectAll('path')
.style("fill", colorScale(d.value))
.on('mouseenter', function() {
d3.selectAll(`g[aria-label]:not([aria-label="${d.id}"])`)
.style('opacity', 0.5)
})
.on('mouseout', function() {
d3.selectAll(`g[aria-label]:not([aria-label="${d.id}"])`)
.style('opacity', 1)
})
});
}.amcharts-bg {
fill: #EEF1FA
}
.amcharts-map-image {
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>因為十六進制形狀稍微分開，我們看到很多閃爍。這可以通過對上面示例的更新來緩解，其中缺點是一旦一個十六進制懸停，那么地圖將不會回到所有不透明度為 1 的十六進制的默認位置：
var data = [{
"id": "Scotland ",
"value": 5000
},
{
"id": "Wales ",
"value": 3000
},
{
"id": "Ireland ",
"value": 750
},
{
"id": "North West ",
"value": 1250
},
{
"id": "North East ",
"value": 4500
},
{
"id": "East Midlands ",
"value": 2000
},
{
"id": "South East ",
"value": 350
},
{
"id": "South West ",
"value": 6000
},
{
"id": "East of England ",
"value": 4000
},
{
"id": "West Midlands ",
"value": 2500
},
{
"id": "Northern Ireland ",
"value": 1000
},
{
"id": "Isle of Man ",
"value": 3000
},
{
"id": "Yorkshire and the Humber ",
"value": 1500
},
{
"id": "Greater London ",
"value": 5000
}
];
var colorScale = d3
.scaleLinear()
.domain(d3.extent(data, (d) => d.value))
.range(["#5C4D87", "#EC4E6B"])
.interpolate(d3.interpolateHcl)
const svgUrl = "https://raw.githubusercontent.com/gangrel11/samplefiles/main/amCharts.pixelMap.svg";
d3.xml(svgUrl).then(render);
function render(svg) {
d3.select("body").node().append(svg.documentElement);
data.forEach(d => {
d3.selectAll(`g[aria-label="${d.id}"]`)
.datum(data)
.selectAll('path')
.style("fill", colorScale(d.value))
.on('mouseenter', function() {
d3.selectAll(`g[aria-label]:not([aria-label="${d.id}"])`)
.style('opacity', 0.5)
d3.selectAll(`g[aria-label="${d.id}"]`)
.style('opacity', 1)
})
.on('mouseout', function() {
})
});
}.amcharts-bg {
fill: #EEF1FA
}
.amcharts-map-image {
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/474452.html
標籤：javascript d3.js css 选择器
上一篇：轉換兩組元素不起作用