динамически хранить объекты d3 внутри карты даже при изменении размера браузера

Question

У меня есть несколько проблем, которые нужно решить

1. В приведенном выше примере должно отображаться 10 кругов (необязательно должно быть 10), однако отображается только 6, даже если для ширины установлено значениеучтите это.
2. Высота SVG, по-видимому, хорошо согласуется с картой, однако ширина кажется переполненной в зависимости от установленной ширины. Как мне сохранить размер SVG в зависимости от размера карты? По сути, я хочу, чтобы круги всегда оставались внутри карты, даже при изменении размера браузера.
3. Количество кругов может быть где-то между 2-50 и должно оставаться внутри карты, даже если ее нужно обрезатьпри превышении границы карты.

С уважением, Эдвард

import { Component } from "react";
import "./App.css";
import * as d3 from "d3";

class Process extends Component {
  constructor(props) {
    super(props);
    this.createProcess = this.createProcess.bind(this);
  }
  componentDidMount() {
    this.createProcess();
    this.drawProcess();
  }
  componentDidUpdate() {
    this.drawProcess();
  }

  drawProcess() {
    const width = +this.svg.attr("width");
    const height = +this.svg.attr("height");

    const makeFruit = test => {
      return test;
    };

    const fruits = d3.range(10).map(() => makeFruit("apple"));

    this.svg
      .selectAll("circle")
      .data(fruits)
      .enter()
      .append("circle")
      .attr("cx", (d, i) => i * 120 + 60)
      .attr("fill", "orange")
      .attr("cy", height / 2)
      .attr("r", 50)
      .attr("transform", "translate(0,75)");

    fruits.pop();
    this.svg
      .selectAll("circle")
      .data("fruits")
      .exit()
      .remove();
  }

  createProcess() {
    this.svg = d3
      .selectAll("#flowView")
      .append("svg")
      .attr("width", "1300");
  }

  render() {
    return null;
  }
}
export default Process;