modification de l'épaisseur de l'axe de graphique par défaut dans Billboard.js/d3.js

J'ai créé un tableau avec Billboard.js(une bibliothèque graphique d'interface basée sur D3 v4 +). Le problème que j'ai est avec l'épaisseur de l'axe qui est faite par défaut assez épaisse, je n'ai pas trouvé de méthode pour les rendre plus minces.modification de l'épaisseur de l'axe de graphique par défaut dans Billboard.js/d3.js

Voici comment mon tableau ressemble à:

j'ai réussi à changer leur épaisseur quand je cliqué, bouton droit sur eux et ouvert à l'inspection, l'élément de l'axe vertical est:

<path class="domain" d="M-6,1H0V446H-6"></path>

et pour l'axe horizontal, il est:

<path class="domain" d="M0,6V0H898V6"></path>

J'ai découvert que si je change les 6 s avec 2 s en inspecter le mode d'être comme:

<path class="domain" d="M-2,1H0V446H-2"></path> et

<path class="domain" d="M0,2V0H898V2"></path>, il sera beaucoup plus mince comme il devrait être. Y at-il un moyen d'effectuer cette modification dans le fichier css/less?

Source

2017-10-12 Samurai Jack

Est assez facile. Réglez simplement la règle css pour l'axe. Définissez la règle pour .bb-axis et définissez la valeur de propriété stroke-width souhaitée.

Consultez l'exemple ci-dessous.

bb.generate({ 
 
\t "data": { 
 
\t \t "columns": [ 
 
\t \t \t ["data1", 30, 200, 100, 400, 150] 
 
\t \t ], 
 
\t } 
 
});

/* set for y axis */ 
 
.bb-axis.bb-axis-y path { 
 
\t stroke-width: 3px; 
 
} 
 

 
/* set for all the axes. 
 
.bb-axis { 
 
    stroke-width: 3px; 
 
} 
 
*/

<!doctype html> 
 
<html> 
 
<head> 
 
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/billboard.pkgd.min.js"></script> 
 
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/billboard.css"> 
 
</head> 
 
<body> 
 
    <div id="chart"></div> 
 
</body> 
 
</html>

Source

2017-10-23 09:47:31

modification de l'épaisseur de l'axe de graphique par défaut dans Billboard.js/d3.js

Répondre

Questions connexes