将不透明度应用于未使用 d3 鼠标悬停悬停的元素

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 会做到这一点，但效果相反

我的fiddle：jsfiddle

Answer 1

e.id 是 undefined 因为 e 绑定到 data。考虑使用此 select 或：

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

这表示 select 所有具有 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>

将不透明度应用于未使用 d3 鼠标悬停悬停的元素

Apply opacity to elements not hovered on with d3 mouseover

javascript

d3.js

css-selectors