D3js V4.13 set min max высота / ширина

Question

Я работаю над небольшим приложением, которое отображает некоторые данные внутри круга в d3js

Моя проблема в том, что иногда мои круги выходят за пределы высоты SVG, и мы больше не можем видеть данные.

Я искал функцию, которая устанавливает min-max height-widht, я нашел ее в версии 3 D3js, но не в версии 4

Я пытался использовать forceXи forceY, но он центрирует все мои данные, я хочу, чтобы они могли перемещаться повсюду в svg без гравитационного впечатления, что forceX и forceY дают

, вот часть моего кода:

    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: я использую d3js с угловым, поэтому я использую @ types / d3

, вот блик стека: https://stackblitz.com/edit/angular-tpbq2t, но с большим количеством круга данных можно выйти за пределыэкран ... и это моя проблема ...