Cfrgtkky

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 ...