Tengo una pequeña pregunta. En mi aplicación estoy usando d3.js. Y necesito obtener los valores del atributo de transformación. Encontré la misma pregunta ¿Cómo registrar el atributo de rotación en la transformación usando d3.js? Pero estoy usando una versión más nueva de la biblioteca. ¿Cómo puedo obtenerlo? Porque:
<g class='myclass' transform='translate(30, 0)'> ... d3.select('.myclass').attr('transform')devolver la cadena.
translate(30, 0)(Necesito obtener solo los números 30 y 0) No encontré ninguna función para esto. Puedo obtener valores usando expresiones regulares, pero creo que es demasiado en este caso. Debe haber alguna forma normal de obtener estos valores. ¡Gracias!
Dado que el elemento <g> implementa la interfaz SVGGraphicsElement , presenta una propiedad .transform que permite el acceso a SVGAnimatedTransformList que contiene las transformaciones en ese elemento. Dado que solo hay una traducción como en su código, se puede acceder a ella de esta manera:
d3.select("g").node() .transform // get the animated transform list .baseVal // get its base value .getItem(0) // get the first transformation from the list, ie your translate .matrix // get the matrix containing the values La propiedad .matrix es de tipo SVGMatrix y contiene los valores para la traducción del elemento de grupo en sus propiedades e y f .
Eche un vistazo a la siguiente demostración para verlo en acción:
const translate = d3.select("g").node() // get the node .transform // get the animated transform list .baseVal // get its base value .getItem(0) // get the first transformation from the list, ie your translate .matrix // get the matrix containing the values console.log(`Translate x: ${translate.e}, y: ${translate.f}`); <script src="https://d3js.org/d3.v7.js"></script> <svg> <g transform='translate(30, 0)'></g> </svg>