无法更改 D3js 旭日形图中特定路径的不透明度

【问题标题】：cant change the opacity of a specific path in D3js sunburst chart无法更改 D3js 旭日形图中特定路径的不透明度
【发布时间】：2020-10-14 19:33:23
【问题描述】：

我的目标是改变特定路径的不透明度。

这是我为图表中的每个切片添加路径的地方：

h = f.selectAll("path").data(o);
h.enter().append("path")        
.attr("id", function (t, n) { return "path-" + n})
.attr("d", x).attr("fill-rule", "evenodd").style("fill", n).on("click", l)
.on("mouseover", function(t,n) {mouseover("path-" + n)});

鼠标悬停功能内部是我尝试过的：

function mouseover(d){ 
    // d is the id of the path that was hovered over
    // d looks like 'path-20'

    d3.selectAll("path").style("opacity", 0.3); // changes opacity for entire sunburst chart        
    d3.selectAll(d).style("opacity", 0.3); // does nothing
    d3.selectAll("path-20").style("opacity", 0.3); // does nothing
    d3.select(d).style("opacity", 0.3); // does nothing
    d3.select("path-20").style("opacity", 0.3); // does nothing
}

【问题讨论】：

标签： d3.js sunburst-diagram

【解决方案1】：

首先，如果您想按类别进行选择，请改用.<class-name>。如果要按 ID 进行选择，请使用 #<id>。这些是来自 CSS、jQuery、vanilla JavaScript 和 D3 的通用选择器。

不过，更简单的是，对于函数 on("mouseover", function() { ... })，在点的位置上，this 现在指向您要选择的 HTMLElement。

这使得以下功能非常适合您的需求：

const data = d3.range(5);

d3.select('svg')
  .selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('width', 20)
  .attr('height', 20)
  .attr('x', function(d, i) {
    return 30 * i;
  })
  .attr('y', 40)
  .on('mouseover', function() {
    d3.select(this).attr('opacity', 0.2);
  })
  .on('mouseleave', function() {
    d3.select(this).attr('opacity', null);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

【讨论】：