Comment cacher les étiquettes de texte dans d3 lorsque les nœuds sont trop petits ?

Question

Je suis en train de créer un soleil zoomable similaire à celui-ci exemple . Le problème est que j'ai beaucoup de données dans mon éclat de soleil, de sorte que les étiquettes de texte sont mélangées et difficilement lisibles. J'aimerais donc cacher les étiquettes lorsqu'elles sont trop petites, comme dans l'exemple suivant d3.partition.layout exemple. Comment dois-je procéder pour mettre en œuvre cette fonctionnalité ?

Answer 1

Je viens de le faire fonctionner en ajoutant ce qui suit :

var kx = width / root.dx, ky = height / 1;

Ensuite, dans la section de déclaration de texte, procédez comme suit :

var text = g.append("text")
  .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
  .attr("x", function(d) { return y(d.y); })
  .attr("dx", "6") // margin
  .attr("dy", ".35em") // vertical-align
  .attr("opacity", function(d) { return d.dx * ky > 10 ? 1 : 0; })
  .text(function(d) { return d.name; });

La partie clé de ce qui précède est cette ligne :

.attr("opacity", function(d) { return d.dx * ky > 10 ? 1 : 0; })

L'opacité est alors fixée à 0 si elle n'est pas assez grande. Ensuite, dans la fonction click, vous devez faire la même chose, comme suit :

function click(d) {
  // fade out all text elements
  text.transition().attr("opacity", 0);

  kx = (d.y ? width - 40 : width) / (1 - d.y);
  ky = height / d.dx;

  path.transition()
    .duration(750)
    .attrTween("d", arcTween(d))
    .each("end", function(e, i) {
    // check if the animated element's data e lies within the visible angle span given in d
    if (e.x >= d.x && e.x < (d.x + d.dx)) {
      // get a selection of the associated text element
      var arcText = d3.select(this.parentNode).select("text");
      // fade in the text element and recalculate positions
      arcText.transition().duration(750)
        .attr("opacity", 1)
        .text(function(d) { return d.name; })
        .attr("opacity", function(d) { return e.dx * ky > 10 ? 1 : 0; })
        .attr("transform", function() { return "rotate(" + computeTextRotation(e) + ")" })
        .attr("x", function(d) { return y(d.y); });
        }
    });
}

Answer 2

Pour mettre cela en œuvre, vous devrez dessiner l'élément de texte, obtenir sa taille réelle à l'aide de la fonction getBBox() et, en fonction de cette taille, l'afficher ou non. Le code ressemblerait à ceci.

 svg.append("text")
    .style("opacity", function() {
      var box = this.getBBox();
      if(box.width <= available.width && box.height <= available.height) {
        return 1; // fits, show the text
      } else {
        return 0; // does not fit, make transparent
      }
    });

Vous pouvez bien entendu supprimer le text complètement, mais cela nécessiterait une passe séparée.