Odtnhj

I'm working on a little app to display some data inside circle in d3js

My problem is, sometimes my circles moves outside of the SVG height-width and we can't see the data anymore.

I've been looking for a function which set min-max height-widht, I found one in the version 3 of D3js but not on version 4

I've tried to use forceX and forceY but it center all of my data, I want them to be able to go everywhere in the svg without the gravity impression that forceX and forceY gives

here is a part of my code :

 const simulation = forceSimulation()
 .force('link', forceLink().id((d) => d['id']).distance(1).strength(1))
 .force('charge', forceManyBody())
 .force('center', forceCenter(width / 2, height / 2))
 .force('collide', forceCollide(d => calculCollide(d)))
json('assets/example.json', (err, data) => 
 const link = svg.append('g')
 .attr('class', 'links')
 .selectAll('line')
 .data(data['links'])
 .enter()
 .append('line')
 .attr('stroke-width', (d) => Math.sqrt(d['value']));

 const node = svg.append('g')
 .attr('class', 'nodes')
 .selectAll('circle')
 .data(data['nodes'])
 .enter()
 .append('g')
 .attr('class','gcircle')
 .append('circle')
 .attr('r', (d) => radiusGroup(d))
 .attr('fill', (d) => color(d['group']))
 .call(drag()
 .on('start', dragStarted)
 .on('drag', dragged)
 .on('end', dragEnded)
 );
 node.append('title')
 .text((d) => d['id']);

 let text = svg.selectAll('.gcircle')
 .append('text')
 .attr("font-family", "sans-serif")
 .attr("font-size", "10px")
 .text(d => d['id']);

 simulation
 .nodes(data['nodes'])
 .on('tick', ticked);

 simulation.force<ForceLink<any, any>>('link')
 .links(data['links']);

 function ticked() 
 link
 .attr('x1', function(d) return d['source'].x; )
 .attr('y1', function(d) return d['source'].y; )
 .attr('x2', function(d) return d['target'].x; )
 .attr('y2', function(d) return d['target'].y; );

 node
 .attr('cx', function(d) return d['x']; )
 .attr('cy', function(d) return d['y']; );
 text
 .attr('dx', d => return d['x'];) 
 .attr('dy', d => return d['y'];); 
 

);


function dragStarted(d) 
 if (!event.active) simulation.alphaTarget(0.9).restart(); 
 d.fx = d.x;
 d.fy = d.y;


function dragged(d) 
 d.fx = event.x;
 d.fy = event.y;

function radiusGroup(d) 

 if (d.group === 1) 
 return 15;
 else 
 return 10;
 


function dragEnded(d) 
 if (!event.active) simulation.alphaTarget(0); 
 d.fx = null;
 d.fy = null;


function calculCollide(d)

 if(d.group === 1) 
 return 25;
 else 
 return 10;
 

PS: I'm using d3js with angular, so I use the @types/d3

here is a stackblitz : https://stackblitz.com/edit/angular-tpbq2t , but with more data circle can go outside of the screen ... and that's my problem ...