Bonjour à tous !

Je souhaite réaliser une page qui permet à la personne qui la consulte d'ajouter des histogrammes dans un graphique. Par défaut il ne doit pas y avoir de "barres" préexistantes dans 'histogramme'. J'ai opté pour un graphique SVG car cela semblait permettre l'interactivité.

Voici le fonctionnement recherché :

1) l'utilisateur insère dans un formulaire un nom de catégorie et sa valeur

2) JS récupère ces infos, chaque nouvelle catégorie est ajouté sous forme objet à un tableau

3) JS boucle sur le tableau et pour chaque élément crée une balise <rect> avec des attributs spécifiques pour ses dimensions

4) La boucle insère les balises au sein d'un balise <g> siuée dans une balise <svg>

Mes divers tests via affichage console semblent suggérer que le problème vient de l'étape 4 : aucun rectangle ne s'affiche à l'écran. Je n'ai trouvé aucune ressource sur internet traitant de la création PAR JS d'une balise de type SVG. A la main dirctement dans l'HTML le rectangle s'affiche correctement.

Voici l'HTML avec le formulaire puis la balise svg :

<p>
<form id="canevasKFForm">

  <label for="canevasKF">New key factor</label> :
  <input type="text" name="canevasKF" id="canevasKF" />
  
  <label for="importanceKF">Importance</label> :
  <select name='importanceKF' id='importanceKF'>
      <option id="crucial">Crucial</option>
      <option id="very important">Very important</option>
      <option id="important">Important</option>
  </select>
  
  <input type="submit" value="Add to Canevas">
</form>
</p>

<svg id = "graph"
     version="1.1" 
     baseProfile="full" 
     width="300" fr
     height="200>


  <g id="bar">
  </g>


</svg>

voici le script :

// 1. constructor for key factors with default force
function KfConstr (name, importance) {
            this.name = name;
            this.importance = importance;
            if (importance = "Crucial") {
              this.force = 9;
            } else if (importance = "Very important") {
              this.force = 6;
            } else {
              this.force = 3;
            }
      }

// 2. Creating a table aimed at regrouping all key factors
var kfList = [];

// 3. Getting the key factor to be added to the Canevas :
//3.1 Instanciating of an object based on the factor and importance typed by user in the form
//3.2 Inserting the new object in the array saving all key factors
//3.3 Looping over the array elements to create an HTML rect element with appropriate values
//3.4 Inside the loop : inserting the rect into svg balise

var form = document.getElementById("canevasKFForm");
form.addEventListener("submit", function(e) {
        var name2Add = form.elements.canevasKF.value;
        var importance2Add = form.elements.importanceKF.value;
        var kf = new KfConstr(name2Add, importance2Add);
        kfList.push(kf);


        for (var i = 0; i < kfList.length; i++) {
            var rect2Add = document.createElement('rect');
            rect2Add.id = kfList[i].name;
            rect2Add.x = 10;
            rect2Add.y = 10;
            rect2Add.width = 15;
            rect2Add.height = 40;
            rect2Add.fill = 'blue';
            document.getElementById("bar").appendChild(rect2Add);
      }
});

Je travaille sur codepen mais le problème ne semble pas venir de là.

merci d'avance pour votre aide !

Julien