Javascript Girl
  1. Javascript Girl
  3. D3.js: axe de graphique non linéaire
Intereting Posts
Directive Angulaire JS – Modèle, compilation ou lien? Hot Code Push NodeJS Comment puis-je obtenir l'étiquette du bouton radio sélectionné à l'aide de javascript La cupidité se comporte-elle différemment en JavaScript? JQuery. Affectez JSON en conséquence à une variable Comment écrire un test qui attend qu'une erreur soit lancée dans Jasmine? Manipulateurs d'événements, fermetures et collecte des ordures dans Javascript Comment écouter les événements clavier sur svg Vérifiez si une chaîne correspond à une regex Formulaire de soumission après preventDefault In-page JavaScript s'arrête quand j'utilise document.body.innerHTML + = newHtmlText Méthode onclick ERROR Est-il possible de cacher le curseur dans une page Web à l'aide de CSS ou de Javascript? Passer un paramètre dans Bloodhound de Typeahead? Calendrier complet – Différent les événements passés des événements futurs

D3.js: axe de graphique non linéaire

J'essaie d'ajouter une échelle personnalisée sur un axe, comme ci-dessous

Ma balance personnalisée

L'idée est qu'une tique est toujours 2 fois supérieure à une tique précédente.

Je crois savoir qu'il s'agit d'une échelle personnalisée. J'ai fait un peu de recherche et je n'ai pas pu trouver quelque chose comme ça.

Donc je suppose que ma question est en fait deux questions:

  1. Cette échelle est-elle «standard» dans le monde mathématique?

  2. Est-ce possible d'implémenter cela en utilisant d3.js ?

Tout lien vers un tutoriel connexe ou un exemple en direct (p. Ex. JsFiddle) est également le bienvenu.

EDIT: J'ai maintenant posé une question connexe sur mathematica.stackexchange.com pour m'aider à trouver la solution à ce problème et mettra à jour cette publication après avoir essayé quelques choses.

Les échelles Polylinear peuvent être utilisées dans ce scénario. À partir de la documentation linéaire api :

Bien que les échelles linéaires ont généralement seulement deux valeurs numériques dans leur domaine, vous pouvez spécifier plus de deux valeurs pour une échelle polylinear. Dans ce cas, il doit y avoir un nombre équivalent de valeurs dans la gamme de sortie. Une échelle polylédaire représente des échelles linéaires multiples par morceaux qui divisent un domaine et une portée continu.

Voici un exemple qui correspond à vos besoins: 

 // Your custom scale: var customScale = d3.scale.linear() .domain([125,250,500,1000,2000]) .range([0,50,100,150,200]); // The axis uses the above scale and the same domain: var axis = d3.svg.axis() .scale(customScale) .tickValues([125,250,500,1000,2000]);

Connaissant le nombre de tiques ainsi que les étendues de domaine et de portée, le calcul des deux tableaux est trivial (notez qu'ils doivent être de même longueur).