Affichage de l'axe des y en pourcentages?

Je suis en train de faire un tableau, et je veux que mon axe y étiquettes de graduation d'affichage sous forme de pourcentages (au lieu de décimales). Comment puis-je faire cela?

Mon code ressemble à quelque chose comme

yAxis
  .append("text")
  .attr("class", "ticklabel")
  .attr("x", 0)
  .attr("y", y)
  .attr("dy", ".5em")
  .attr("text-anchor", "middle")
  .text(y.tickFormat(5))
  .attr("font-size", "10px")

J'ai remarqué que d3 a une spécificateur de format, mais je ne suis pas sûr de la façon de les utiliser en conjonction avec tickFormat.

OriginalL'auteur grautur | 2012-04-18

  1. 38

    Il semble que la création de l'axe à la main. Je recommande d'utiliser le d3.svg.axe composant au lieu de cela, ce qui ne l'rendu pour vous. Par exemple:

    Si vous voulez formater les tiques sous forme de pourcentages, puis utilisez d3.format's % directive:

    var formatPercent = d3.format(".0%");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(formatPercent);

    Vous pouvez utiliser à la place la p directive, si vous voulez arrondir le pourcentage de chiffres significatifs.

    Pour répondre à votre question plus directement, vous utilisez d3.format au lieu de l'échelle du tickFormat. Les échelles de fournir une valeur par défaut tickFormat pour des raisons de commodité, mais si vous voulez un comportement différent, puis vous utilisez un personnalisé d3.format plutôt qu'à l'échelle par défaut.

    OriginalL'auteur mbostock