Obtenir la largeur de l'élément de texte SVG d3.js après sa création

Je vais essayer d'obtenir les largeurs de bande de text éléments que j'ai créé avec d3.js

C'est ainsi que je suis leur création:

var nodesText = svg.selectAll("text")
           .data(dataset)
           .enter()
           .append("text")
           .text(function(d) {
                return d.name;
           })
          .attr("x", function(d, i) {
                return i * (w / dataset.length);
           })
          .attr("y", function(d) {
                return 45;
          });

Je suis alors à l'aide de la largeur de créer rectangles de la même taille que le text's boîtes

var nodes = svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x", function(d, i) {
                return i * (w / dataset.length);
            })
            .attr("y", function(d) {
                return 25;
            })
            .attr("width", function(d, i) {
              //To Do: find width of each text element, after it has been generated
              var textWidth = svg.selectAll("text")
                  .each(function () {
                      return d3.select(this.getComputedTextLength());
                  });
                console.log(textWidth);
                return textWidth;
            })
            .attr("height", function(d) {
                return 30;
            })

J'ai essayé d'utiliser la Bbox méthode de ici mais je ne comprends pas vraiment. Je pense que la sélection de l'élément actuel est là que je vais vraiment mal.

source d'informationauteur sanjaypoyzer | 2014-01-31

  1. 11

    Je voudrais faire la longueur de la partie des données d'origine:

    var nodesText = svg.selectAll("text")
       .data(dataset)
       .enter()
       .append("text")
       .text(function(d) {
            return d.name;
       })
      .attr("x", function(d, i) {
            return i * (w / dataset.length);
       })
      .attr("y", function(d) {
            return 45;
      })
      .each(function(d) {
        d.width = this.getBBox().width;
      });

    et puis plus tard

    var nodes = svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("width", function(d) { return d.width; });
  2. 3

    Vous pouvez utiliser getBoundingClientRect()

    Exemple:

    .style('top', function (d) {
     var currElemHeight = this.getBoundingClientRect().height;
}

    edit: il semble que plus appropriées pour les éléments HTML. pour les éléments SVG, vous pouvez utiliser getBBbox() à la place.

  3. 1

    d3.selectAll renvoie une sélection. Vous pouvez obtenir chacun des éléments en parcourant le tableau dans le _groups de la propriété. Lorsque vous êtes à la détermination de la largeur d'un rectangle, vous pouvez utiliser l'index correspondant à l'élément de texte:

    .attr('width', function (d, i) {
    var textSelection = d3.selectAll('text');
    return textSelection._groups[0][i].getComputedTextLength();
});

    La _groups propriété de d3 de la sélection d'une liste de noeuds de [0]. Ce liste contient tous les sélectionnés élémentsauquel vous pouvez accéder par l'index. Il est important que vous obtenez le SVG élément de sorte que vous pouvez utiliser le getComputedTextLength méthode.

    Vous pouvez également envisager la création de la rect éléments en premier, puis le text éléments, et en remontant ensuite les rectangles de modifier le width attribut, de sorte que le text éléments sont sur le dessus des rectangles (dans le cas où vous voulez remplir les rectangles avec de la couleur).

    Mise à jour:

    Il est généralement préférable que vous n'avez pas accès _groupsbien que, d'une manière plus sûre pour obtenir le texte correspondant de l'élément de largeur serait:

    .attr('width', function (d, i) {
    return d3.selectAll('text').filter(function (d, j) { return i === j; })
        .node().getComputedTextLength(); 
});

    À l'aide de node en toute sécurité récupère l'élément, et le filtre à trouver l'élément de texte qui correspond à l'index.