He seleccionado el elemento svg (círculo) y quiero aplicarle una transición. Cuando trato de aplicar la transición en el círculo, aparece "TypeError no detectado: circle.transition is not a function".

He escrito este código:

 import * as selection from '../node_modules/d3-selection/src/index.js'; const RENDER_AREA_ID = "#renderArea"; let svg = selection.select(RENDER_AREA_ID).append("svg") .attr("width", document.querySelector(RENDER_AREA_ID).offsetWidth) .attr("height", document.querySelector(RENDER_AREA_ID).offsetHeight); let circle = svg.append("circle") .attr("r", 10) .attr("cx", 10) .attr("cy", 10) .attr("fill", "blue") .attr("stroke", "black"); circle.transition().attr("cx", 100); // here I get the TypeError

Probé D3 versión 4.x (disponible en este enlace: https://d3js.org/d3.v4.min.js ) y la transición funcionó bien. Enfrento el problema al usar la versión 7.2.1.

Mi pregunta es: ¿Qué podría estar causando el TypeError no detectado?

ACTUALIZACIÓN: acabo de descubrir que el problema está asociado de alguna manera con npm. Cuando accedo a D3 a través de este enlace: https://d3js.org/d3.v7.min.js , la transición funciona. Pero cuando uso el paquete d3 de npm, ocurre el problema.