更改Billboard.js/D3.js中的默認圖表軸線厚度

我創建了一個圖表Billboard.js（基於D3 v4 +的接口圖表庫）。我遇到的問題是默認厚度很厚的軸的厚度，我找不到任何方法使它們變苗條。更改Billboard.js/D3.js中的默認圖表軸線厚度

這是我的圖表看起來像：

我設法改變它們的厚度，當我用鼠標右鍵點擊它，並開設了檢查，爲縱座標的元素是：

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

和水平軸，它是：

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

我發現，如果我改變6 s的2■在檢查模式是這樣的：

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

<path class="domain" d="M0,2V0H898V2"></path>，它會看起來更苗條，因爲它應該是。有沒有辦法在css/less文件中進行此更改？

來源

2017-10-12 Samurai Jack

很簡單。只需爲軸設置css規則即可。設置規則爲.bb-axis並設置stroke-width您想要的屬性值。

請看下面的例子。

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>

來源

2017-10-23 09:47:31

更改Billboard.js/D3.js中的默認圖表軸線厚度

回答

相關問題