將不透明度應用於未使用 d3 mouseover 懸停的元素

Question

我正在嘗試應用鼠標懸停功能，為未懸停的元素添加不透明度。

我有一個帶有區域的 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

Answer 1

e.id undefined ，因為e綁定到data 。 考慮使用這個選擇器：

g[aria-label]:not([aria-label="${d.id}"])

其中說選擇所有帶有aria-label的g元素，但不是那些帶有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>