无法更改D3js朝阳图中特定路径的不透明度

如何解决无法更改D3js朝阳图中特定路径的不透明度

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

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

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
}

解决方法

首先，如果要按班级进行选择，请改用.<class-name>。如果要按ID选择，请使用#<id>。这些是CSS，jQuery，香草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',null);
  });

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