d3-selection | Transform the DOM by selecting elements and joining to data | Plugin library

I want to set up a project using the Britecharts library. Having installed Britecharts with npm install --save britecharts d3-selection I'm trying to verify that the imports are working by displaying a basic chart in the browser.

My index.html:

I'm seeing errors in running tests in Angular:

I want to transform json data like packageJson into a hierarchical format suitable for a tree graph

using d3.hierarchy to transform the Object as I understood every property which contains nested data needs to be transformed using a helper function inside like

const test = d3.hierarchy(packageJson, d => d.scripts);

is the only way to transform packageJson by finding every property with a nested object
or are any d3 helper function which Im unaware of for this kinda task ?

I am writing you because I'm struggling with D3.js (D3-selection) for moving existing elements positions in the SVG.

I've seen a lot of examples for creating new elements, but here, my elements are already created.

I have this structure in my svg :

I want to connect node inside one big circle to node inside another big circle or sometimes to another bigger circle itself. Is there a way to achieve the same ? I am able to connect nodes inside the same circle.

Below is the sample code that I have tried with :

I'm getting the following error when I ng serve (and I've already tried to clear cache, reinstall all modules and reboot the server)

I am trying to make the nodes of the directed network appear to be located at the coordinates reflected in the json document when the page is started. However, the actual code recalculates the node positions, which does not fit the requirements of my application . Any help?

MAIN CODE

I am trying to understand the join() function, in D3v6. Obvously I misunderstand the official D3 join() documentation. https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_join, because I thought I can use join() instead of the typical append(), enter(), remove(), exit() pattern and save tons of code.

The code below creates 3 nodes at the beginning, with a context menu. I can add and remove data call the initialize() function again to redraw the nodes. The problem is, that the "old nodes" are still there. Instead of adding only 1 node, the whole node groups are redrawn.

What did I miss?

I created a small D3v6 forced graph with an tooltip hover function. Everything works as expected but the position of the tooltip is set in dependency of the mouse position. Is there a easy possibility to use the current node position as a reference?

My thoughts so far are, to get the current d(node) position.

The goal is to normalize the tooltip position, for a cleaner look.