title: Issue with responsive SVG and JavaScript
body: <p>Still me with that SVG issues. I've made many steps further since the last time, and right now, i'm facing a new problem.</p>
  <p>Here is the code I have so far : (Use in full screen mode)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>d3.select('#step').on('click', function() {
    sections = document.getElementById("sections").value;
    deuxiemeEtape(sections);
  });
  
  
  //Affichage des inputs suivants
  function deuxiemeEtape(sections) {
  
    var form = d3.select("#form2")
    form.html('');
    form.append('hr');
    form.append('p').html('Nom des sections').style('text-decoration', 'underline');
    for (i = 1; i &lt;= parseInt(sections); i++) {
      //Ind à deux pour commencer le compteur de sous section a 2
      let ind = 2;
      const secGroup = form.append('div').attr('class', 'section');
      const sec = secGroup.append('div').attr('class', 'section-info');
      sec.append('label')
        .html("Nom de la section " + i)
        .style("text-decoration","underline")
        .attr('titreSec',(i));
      sec.append('input').attr('type', 'text')
      sec.append('button').attr('type', 'button').text('Ajouter sous section')
        .on('click', () =&gt; {
          //Insertion des sous sections supplémentaires
          const subSecGroup = subSections.append('div').attr('class', 'sous-section');
          subSecGroup.append('label').html("Nom de la sous section " + ind++);
          subSecGroup.append('input').attr('type', 'text')
          subSecGroup.append('button').attr('type', 'button')
          //Ajout de l'event pour la suppression de la sous-section
            .text('Supprimer').on('click', () =&gt; {
              subSecGroup.remove();
              //-1 à ind pour éviter d'avoir des problèmes niveau affichage du nom des sous sections
              ind--;
            })
        });
  
      const subSections = secGroup.append('div');
      const subSecGroup = subSections.append('div').attr('class', 'sous-section');
      subSecGroup.append('label').html("Nom de la sous section 1" );
      subSecGroup.append('input').attr('type', 'text');
    }
  
    //Je met les premiers input en disabled pour éviter les conflits
    // d3.select("#circles").attr('disabled', '');
    // d3.select("#sections").attr('disabled', '');
    // d3.select("#step").attr('disabled', '');
    // d3.select('select').attr('disabled','')
    form.append('button')
      .attr("id", "create")
      .html("Créer")
      .on('click', creation);
    form.append('button')
      .attr("id", "reset")
      .html("Reset")
      .on('click', reloadPage);
  
  }
  //Fonction de rechargement de page pour reset
  function reloadPage() {
    window.location.reload();
  }
  
  //Fonction qui permet la création du SVG
  function createSvg  (circles)  {
    const svg = d3.select('#canvas');
    const width = parseInt(svg.attr('width'));
    const height = parseInt(svg.attr('height'));
    svg.selectAll('g').remove();
    const g = svg.append('g')
      .attr('transform', `translate(${width / 2},${height / 2})`);
    const tailleChoisie=parseInt(d3.select('select').node().value);
    const epaisseur = 25 * tailleChoisie;//Changement de la taille du cercles en fonction de la taille choisie dans l'input
    const emplacementHauteur= (tailleChoisie*11)+11;//Valeur qui permet de centrer les textes peu importe la taille choisie
    const fullCircle = 2 * 3.14;
  
    
    const subSectionInputs = document.querySelectorAll('.sous-section input');
    const taillePetiteSection = fullCircle / subSectionInputs.length;
    const sections = document.querySelectorAll('.section');
        //Ajout des parties extérieures (Grande sections uniquement)
        let prevAngle = 0;
        for (let j = 0; j &lt; sections.length; j++) {
          const subSections = sections[j].querySelectorAll('.sous-section input');
          const endAngle = prevAngle + (subSections.length * taillePetiteSection);
          const text = sections[j].querySelector('.section-info input').value;
          //Ajout de la section
          g.append("path")
            .attr("d", d3.arc()
              .innerRadius(circles * epaisseur)
              .outerRadius((circles + 1) * epaisseur)
              .startAngle(prevAngle)
              .endAngle(endAngle)
            )
            .attr("id", () =&gt; 'section' + circles + j)
            .attr('stroke', 'black')
            .attr('fill', colorArray[j])
            .attr('class','grande-section-'+j)
            .on('click',localisation);
          //Ajout du texte
          g.append("text")
            .attr("class", "monthText")
            .attr("dy", 22)
            .append("textPath")
            .attr("startOffset", "22%")
            .style("text-anchor", "middle")
            .attr("xlink:href", () =&gt; "#section" + circles + j)
            .text(() =&gt; text);
  
          prevAngle = endAngle;
        }
  
      
  
    // Ajout des parties "Intérieures" (tout ce qui n'est pas une grande section)
    for (let i = 0; i &lt; circles; i++) {
      for (let j = 0; j &lt; subSectionInputs.length; j++) {
        //Check si c'est une sous-section à colorer en blanc ou pas
        if (i + 1 === circles) {
          appendArcs(g, i, j, epaisseur, taillePetiteSection, colorArray[j], subSectionInputs[j].value,emplacementHauteur);
        } else {
          appendArcs(g, i, j, epaisseur, taillePetiteSection, 'white', i + 1,emplacementHauteur);
        }
  
      }
      
    }
    
    
  }
  
  //Fonction pour l'ajout des sections "intérieures"
  function appendArcs(parent, i, j, epaisseur, arcSize, color, text,emplacementHauteur) {
    
    if(color!='white'){
      //Si c'est une sous section à color, je change la couleur. Je retire à J le nombre de sous section supplémentaire pour avoir la même couleur que la section mère
      //A CHANGER, POUR LE MOMENT JE NE TROUVE PAS COMMENT LE FAIRE
      
      color='blue'
      
    }
    //Ajout de la section
    parent
      .append("path")
      .attr("d", d3.arc()
        .innerRadius(i * epaisseur)
        .outerRadius((i + 1) * epaisseur)
        .startAngle(j * arcSize)
        .endAngle((j + 1) * arcSize)
      )
      .attr("id", () =&gt; 'section' + i + j)
      .attr('stroke', 'black')
      .attr('fill', color)
      .on('click',localisation)
      ;
      //Ajout du texte s'il y en a
    if (text) {
      parent.append("text")
        .attr("class", "monthText")
        .attr("dy", emplacementHauteur)
        .style("text-anchor", "middle")
        .append("textPath")
        .attr("startOffset", "22%")
        .attr("xlink:href", () =&gt; "#section" + i + j)
        .text(() =&gt; text);
    }
  
  }
  
  //Tableau de couleur pour avoir des background de section par défaut, ça évite le surplus d'inputs
  var colorArray = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', 
            '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
            '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', 
            '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
            '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC', 
            '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
            '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680', 
            '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
            '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3', 
            '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];
  
  
  function creation() {
    const circles = d3.select('#circles').node().value;
    const sections = d3.select('#sections').node().value;
    createSvg(parseInt(circles)+1, parseInt(sections),colorArray);
  }
  
  
  //Fonction de localisation de la section selectionnée
  function localisation(){
    console.log(event.target);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
      margin:0;
      padding:0;
      background-color: rgb(78, 98, 112);
      font-family: Helvetica;
  }
  
  input{
      border-radius: 3px;
      margin:1em 0;
  }
  
  svg{
      border:3px black solid
  }
  
  input,label{
      margin-right:1em;
  }
  
  .monthText {
      fill: #161414;
      font-size: 22px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="fr"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;SVG&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div&gt;
          &lt;div id="contenu"&gt;
              &lt;div id="formulaire"&gt;
                  &lt;label&gt;Nombre de cercles&lt;/label&gt;
                  &lt;input type="number" min="1" id="circles" /&gt;
                  &lt;label&gt;Nombre de sections&lt;/label&gt;
                  &lt;input type="number" min="1" id="sections" /&gt;
                  
                  &lt;label&gt;Taille des cercles&lt;/label&gt;
                  &lt;select&gt;
                      &lt;option value="1"&gt;1&lt;/option&gt;
                      &lt;option value="2"&gt;2&lt;/option&gt;
                      &lt;option value="3"&gt;3&lt;/option&gt;
                      &lt;option value="4"&gt;4&lt;/option&gt;
                      &lt;option value="5"&gt;5&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;button id="step"&gt;Suivant&lt;/button&gt;
              &lt;/div&gt;
              &lt;div id="form2"&gt;
                  &lt;!-- Insert inputs here --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;svg id="canvas" height="750" width="1700"&gt;
                  
                  &lt;text&gt;
                  &lt;/text&gt;
              &lt;/svg&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"&gt;&lt;/script&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>So as you can see, I can choose the size of the circles (3rd input) but the issue is, if the SVG generated is too big for the canvas, it just crop it. Is there a way to make the canvas bigger as the SVG is ?</p>
  <p>For example : If the SVG generated is 800 height and 1800 width, the canvas needs to be bigger so it can show everything ? Thank you for this ! Have a great day !</p>