I have selected svg element (circle) and I want to apply a transition on it. When I try to apply transition on the circle I get "Uncaught TypeError: circle.transition is not a function".

I've written this code:

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

I've tried D3 version 4.x (avalible on this link: https://d3js.org/d3.v4.min.js) and the transition worked just fine. I face the issue while using version 7.2.1.

My question is: What could be possibly causing the Uncaught TypeError?

UPDATE: I've just find out that the issue is somehow associated with npm. When I access D3 through this link: https://d3js.org/d3.v7.min.js, then the transition works. But when I use d3 package from npm then the issue occurs.