[javascript] Comment adapter les étiquettes de graduation de longueur variable sur un diagramme linéaire D3?


Answers

Un problème de poule et d'oeuf empêche que cela ne soit précalculé de manière fiable, en supposant que vous souhaitiez que vos axes et votre tracé se combinent pour remplir un espace fixe, et que vos étiquettes soient automatiquement générées.

Le problème est que les étiquettes des graduations, et donc l'espace qu'elles nécessitent, dépendent de l'échelle. Une échelle de temps, par exemple, peut inclure des noms de mois plus longs (par exemple «Septembre») sur un domaine court, mais des noms de mois plus courts ou seulement des années sur un domaine long. Mais l'échelle, au moins sur l'axe opposé, dépend de l'espace laissé pour la gamme, qui dépend de l'espace restant après la détermination des étiquettes de graduation.

Dans de nombreux cas, les valeurs minimum et maximum peuvent vous donner une idée des étiquettes les plus larges, et vous pouvez utiliser la méthode de Lars . Par exemple, si le domaine est compris entre -50 et 10, les étiquettes de graduation entre celles-ci seront plus étroites. Mais cela suppose qu'ils sont des entiers! Aussi, soyez prudent avec les échelles « gentilles »; Si votre valeur maximale est 8, D3 peut essayer de créer la plus grande étiquette 10, qui est une chaîne plus large.

Question

Voici un JSFiddle: http://jsfiddle.net/8p2yc/ (Un exemple légèrement modifié d'ici: http://bl.ocks.org/mbostock/3883245 )

Comme vous pouvez le voir dans le JSFiddle, les étiquettes de tick le long de l'axe y ne rentrent pas dans le svg. Je sais que je peux augmenter la marge de gauche, mais le fait est que je ne sais pas quelles seront les données à l'avance. Si je fais juste une marge très grande, le tableau aura l'air gênant si les nombres sont courts.

Existe-t-il un moyen de précalculer la largeur maximale de l'étiquette lors de la création du graphique pour définir correctement la marge? Ou peut-être y a-t-il une solution entièrement différente?

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 400 - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Merci!




Links