D3.v3 scatterplot avec tous les cercles du même rayon

Mise à jour: l' API NVD3 a changé, et utilise maintenant pointSize , pointSizeDomain , etc. au lieu de la size . Le reste de la logique pour explorer l'API actuelle sans documentation complète s'applique toujours.

Pour les graphiques NVD3, l'idée est que tous les réglages que vous effectuez peuvent être effectués en appelant des méthodes sur la fonction graphique (ou ses composants publics) avant d'appeler cette fonction pour dessiner le graphique dans un élément de conteneur spécifique.

Par exemple, dans l'exemple que vous avez associé, la fonction graphique a été initialisée comme ceci:

  var chart = nv.models.scatterChart() .showDistX(true) .showDistY(true) .color(d3.scale.category10().range()); chart.xAxis.tickFormat(d3.format('.02f')); chart.yAxis.tickFormat(d3.format('.02f')); 

Les .showDistX() et .showDistY() la distribution de la marque dans les axes; .color() définit la série de couleurs que vous souhaitez utiliser pour les différentes catégories. Les lignes suivantes contiennent également les objets d'axe par défaut dans le tableau et définissent le format de nombre comme une décimale à deux chiffres. Vous pouvez jouer avec ces options en cliquant sur l'option Scatterplot de la page "Live Code" .

Malheureusement, les fabricants des cartes NVD3 n'ont pas encore une documentation complète décrivant toutes les autres options que vous pouvez définir pour chaque graphique. Cependant, vous pouvez utiliser le javascript lui-même pour vous permettre de savoir quelles méthodes sont disponibles.

Inspecter un objet graphique NVD3.js pour déterminer les options

Ouvrez une page Web qui charge la bibliothèque d3 et nvd3. La page de code en direct sur leur site fonctionne bien. Ensuite, ouvrez la ligne de commande de la console de votre développeur (cela dépend de votre navigateur, recherchez vos pages d'aide si vous ne savez pas encore). Maintenant, créez une nouvelle fonction de diagramme de diffusion nvd3 en mémoire:

 var testChart = nv.models.scatterChart(); 

Sur ma console (Chrome), la console imprimera tout le contenu de la fonction que vous venez de créer. C'est intéressant, mais très long et difficile à interpréter en un coup d'œil. Et la plupart du code est encapsulé afin que vous ne puissiez pas le changer facilement. Vous souhaitez connaître les propriétés que vous pouvez modifier. Alors exécutez ce code dans la ligne suivante de votre console:

 for (keyname in testChart){console.log(keyname + " (" + typeof(testChart[keyname]) + ")");} 

La console devrait maintenant imprimer soigneusement les noms de toutes les méthodes et objets auxquels vous pouvez accéder à partir de cette fonction de graphique. Certains d'entre eux auront leurs propres méthodes et objets auxquels vous pouvez accéder; Découvrez ce qu'ils sont en exécutant la même routine, mais en remplaçant le testChart par testChart.propertyName , comme ceci:

 for (keyname in testChart.xAxis){console.log(keyname + " (" + typeof(testChart.xAxis[keyname]) + ")");} 

Retournez à votre problème. La petite routine que j'ai suggérée ci-dessus ne classe pas les noms de propriété dans un ordre, mais en parcourant la liste, vous devriez voir trois options liées à la taille (quelle était la variable de données que les exemples utilisaient pour définir le rayon)

• Taille (fonction)
• SizeDomain (fonction)
• SizeRange (fonction)

Le domaine et la gamme sont des termes utilisés par les échelles D3 , ce qui me donne un indice sur ce qu'ils font. Puisque vous ne souhaitez pas dimensionner les points, commencez par regarder la taille de la propriété. Si vous tapez ce qui suit dans la console:

 testChart.size 

Il devrait imprimer le code pour cette fonction. Il n'est pas très informatif pour ce qui nous intéresse, mais cela me montre que NVD3 suit le format getter / setter de D3: si vous appelez .property(value) vous définissez la propriété à cette valeur, mais si vous appelez .property() Sans aucun paramètre, il renverra la valeur actuelle de cette propriété.

Donc, pour savoir quelle est la taille de la propriété par défaut, appelez la méthode size() sans paramètres:

 testChart.size() 

Il devrait imprimer la function (d) { return d.size || 1} function (d) { return d.size || 1} , qui nous indique que la valeur par défaut est une fonction qui recherche une propriété de taille dans les données, et si elle n'existe pas, renvoie la constante 1. Plus généralement, il nous dit que la valeur définie par la méthode de taille détermine Comment le graphique obtient la valeur de taille à partir des données. La valeur par défaut devrait donner une taille constante si vos données n'ont d.size propriété d.size , mais pour une bonne mesure, vous devez appeler chart.size(1); Dans votre code d'initialisation pour indiquer à la fonction graphique de ne pas déranger d'essayer de déterminer la taille des données et d'utiliser une valeur constante.

Retourner au diagramme de diffusion du code en direct peut le tester. Modifiez le code à ajouter dans l'appel de taille, comme ceci:

  var chart = nv.models.scatterChart() .showDistX(true) .showDistY(true) .color(d3.scale.category10().range()) .size(1); chart.xAxis.tickFormat(d3.format('.02f')); chart.yAxis.tickFormat(d3.format('.02f')); 

L'ajout de cet appel supplémentaire définit avec succès tous les points à la même taille, mais cette taille n'est définitivement pas de 1 pixel, il est clair qu'il y a une mise à l'échelle.

La première idée pour obtenir des points plus importants serait de modifier chart.size(1) à chart.size(100) . Cependant, rien ne change. L'échelle par défaut est clairement calculer son domaine en fonction des données et ensuite être envoyé à une gamme standard de tailles. C'est pourquoi vous ne pouvez pas obtenir de gros cercles en définissant la valeur de taille de chaque élément de données à 0,99, même si cela créerait un grand cercle lorsque certaines données étaient 0,01 et que certaines étaient 0,99. De toute évidence, si vous souhaitez modifier la taille de sortie, vous devrez également définir la propriété .sizeRange() sur le graphique.

Appeler testChart.sizeRange() dans la console pour trouver la valeur par défaut n'est pas très informatif: la valeur par défaut est nulle (inexistante). Donc, j'ai juste .range() que, comme la fonction .range() échelle linéaire D3, l'entrée attendue est un tableau à deux éléments constitué des valeurs max et min. Comme nous voulons une constante, le maximum et le min seront les mêmes. Donc, dans le code en direct, je change:

 .size(1); 

à

 .size(1).sizeRange([50,50]); 

Maintenant, quelque chose se passe! Mais les points sont encore assez petits: définitivement pas de 50 pixels de rayon, il ressemble plus à 50 pixels par espace. La taille calculée en fonction de la zone a du sens lors du dimensionnement à partir des données, mais cela signifie que pour définir une taille constante, vous devrez trouver la zone approximative souhaitée: des valeurs jusqu'à 200 semblent bien sur l'exemple, mais la valeur Vous choisissez dépend de la taille de votre graphique et de la proximité de vos points de données.

–ABR

PS J'ai ajouté la balise NVD3.js à votre question; Assurez-vous de l'utiliser comme étiquette principale à l'avenir lorsque vous posez des questions sur les fonctions du graphique NVD3.

Le rayon est mesuré en pixels. Si vous le définissez à une valeur inférieure à un, oui, vous aurez un très petit cercle. La plupart des exemples qui utilisent des nombres aléatoires utilisent également un facteur de mise à l'échelle.

Si vous voulez que tous les cercles aient un rayon constant, vous n'avez pas besoin de définir la valeur dans les données, il suffit de le configurer lorsque vous ajoutez l'attribut de rayon.

Vous ne savez pas quels didacticiels vous avez regardés, mais commencez ici: https://github.com/mbostock/d3/wiki/Tutorials

L'exemple "Trois petits cercles" fait un bon pas-à-pas des différentes choses que vous pouvez faire avec des cercles: http://mbostock.github.io/d3/tutorial/circle.html