selection.append / insert : le passage de d3 de la v3 à la v4 transforme les cases à cocher en champs de texte

Question

Dans le cadre d'un projet plus vaste, j'ai cette fonction

  var setupSelections = function() {
  var form, labels, all, i;

  form = d3.select("#sample_names")
    .append("form");

  // Draw the labels
  labels = form.selectAll("label")
    .data(Names)
    .enter()
    .append("label")
    .text(function(d) {return d;})
    .insert("input")
    .attr({
        type: "checkbox",
        id: "CB_LABELS",
        class: "checkbox",
        name: function(d, i) {return i;},
        value: function(d, i) {return i;}
    })
    .property("checked", function(d, i) {
      if (i == 0) return 1
      if (i > 0) return 0
    });

  // Add event listeners
  all = document.getElementsByClassName('checkbox');
  for (i = 0; i < all.length; i++) {
    all[i].addEventListener("change", updateSampleBOOL)
  }
} // End of setupSelections

Dans d3 v3, ce code dessine une série d'étiquettes Names avec une case à cocher à côté (à droite de l'étiquette). Dans la version d3 v4, les étiquettes sont présentes mais les cases à cocher se transforment en champs de texte, et bien sûr la partie concernant "coché" échoue puisqu'on ne peut pas définir un champ de texte comme "coché". Je pense que cela doit être lié aux changements décrits. aquí :

En 3.x, selection.append ajoutait toujours le nouvel élément en tant que dernier enfant de son parent. Une astuce peu connue consistait à utiliser selection.insert sans spécifier de sélecteur before lors de la saisie de nœuds, ce qui entraînait l'insertion des nœuds saisis avant l'élément suivant dans la sélection mise à jour. Dans la version 4.0, c'est désormais le comportement par défaut de selection.append ; si vous ne spécifiez pas de sélecteur before à selection.insert, l'élément inséré est ajouté en tant que dernier enfant.

Mais je ne comprends pas vraiment comment l'utiliser pour corriger mon code (si c'est bien là le problème).

Answer 1

Je crois qu'il y a eu un petit changement en ce qui concerne la définition d'attributs multiples de d3 v3 à d3 v4. Le traitement de ce changement a produit les résultats escomptés dans votre code.

Alors que dans d3 v3 vous pouviez utiliser selection.attr() pour définir plusieurs attributs, ce n'est plus le cas. La méthode appropriée pour définir plusieurs attributs à la fois est maintenant :

   .attrs({
    type: "checkbox",
    id: "CB_LABELS",
    class: "checkbox",
    name: function(d, i) {return i;},
    value: function(d, i) {return i;}
})

Mais .attrs n'est pas inclus dans le paquetage par défaut de d3 v4, vous pouvez l'ajouter :

<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>

pour accéder à cette méthode d'aide.

Desde rapport sur les problèmes d3 sur github :

dans la nouvelle version, pour attribuer plusieurs attributs sur la même ligne, vous devez ajouter d3-selection-multi. Maintenant, cette fonctionnalité n'est pas incluse dans l'importation principale de d3. La commande s'appelle maintenant attrs au lieu de attr.

Je pense qu'il y a des changements similaires dans le comportement des méthodes pour selection.property() et selection.style() également.