Creo una clase e instalo varios objetos. Quiero llamar a un método en mi clase cuando se hace clic en un objeto específico y cambiar las cosas para ese objeto específicamente sin cambiar todos los demás objetos de esa clase. Por ejemplo, cuando hago clic en uno de los círculos en mi ejemplo de juguete, es posible que desee cambiar su color o tamaño, pero no cambiar eso para el otro círculo.

He intentado jugar con d3.select(this) pero no estoy haciendo bien algunas cosas porque obtengo resultados extraños o errores. A continuación se muestra mi archivo index.js de ejemplo de juguete con las secciones de comentarios que son lo que estoy tratando de hacer. No incluí index.html ya que es solo un cuerpo con un elemento SVG. Podría usar algo de ayuda en D3 o JavaScript puro.

 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 // //