score:1

Accepted answer

According to the structure of your HTML, I guess this is what you want to achieve:

const svg = d3.selectAll("svg");
const rectangles = d3.selectAll("rect");

rectangles
.on("mouseover", function(){
    // "this" is the rectangle element
    // "this.parentNode.parentNode" is the svg that holding it.
    let parentSvg = this.parentNode.parentNode;

    svg.attr("opacity", function () {
      return parentSvg ==  this ? 1 : 0;
    });
})
.on("mouseout", function(){
    svg.attr("opacity", 1)
});
<script src="https://cdn.jsdelivr.net/npm/d3@5.16.0/dist/d3.min.js"></script>
<svg class="green">
      <g class="blue">

        <rect width="500", height= "500", fill="blue"></rect>
        <circle cx="100", cy="100", r ="50"></circle>
      </g>
    </svg>

      <svg class="green">
        <g class="green">
          <rect width="500", height= "500", fill="green"></rect>
          <circle cx="100", cy="100", r ="50"></circle>
        </g>
      </svg>

      <svg class="green">
        <g class="red">
          <rect width="500", height= "500", fill="red"></rect>
          <circle cx="100", cy="100", r ="50"></circle>
        </g>
      </svg>

      <svg class="green">
        <g class="yellow">
          <rect width="500", height= "500", fill="yellow"></rect>
          <circle cx="100", cy="100", r ="50"></circle>
        </g>
      </svg>


Related Query