I create a class and instantiate several objects. I want to call a method in my class when a specific object is clicked and change things for that object specifically without changing all other objects of that class. For instance, when I click on one of the circles in my toy example I may want to change its color or size but not change that for the other circle.

I have tried playing with d3.select(this) but I am not doing some things right as I get weird results or errors. Below is my toy example index.js file with the comment sections being what I am trying to do. I didn't include the index.html as that is just a body with an SVG element. Could use some help in D3 or pure JavaScript.

import { select } from "d3";
let svg = select("svg");
const width = +svg.attr("width");
const height = +svg.attr("height");

class myCIRC {
  constructor(xpos = 0, ypos = 0) {
    this.name = "myCircles";
    this.xpos = xpos;
    this.ypos = ypos;
    this.renderIT(); //render in the DOM
  }

  //render the circles
  renderIT() {
    const g = svg
      .append("g")
      .attr("transform", `translate(${this.xpos}, ${this.ypos})`);

    let CIRC = g.append("circle");
    CIRC.attr("fill", "blue");
    CIRC.attr("r", 50);
    CIRC.attr("stroke", "black");
    CIRC.attr("class", "CIRC");
  }
  //
  // //Function here to handle when a particular instance clicked
  //   click handler() {
  //     do some calculations
  //     possibly call other functions
  //     change some attributes
  //     update the circle
  //   }



}

//Test section
//create a couple instances of circles from the class
let CIRC1 = new myCIRC(100, 200);
let CIRC2 = new myCIRC(300, 200);

// on click
// d3.select (this)
//
//  call my handler method in the class
//
//