慕容708150
2022-08-04 09:40:19
我正在嘗試增加X軸中的標簽與X子組之間的空間,我在這里使用D3文檔提供的示例我一直在嘗試編輯這部分代碼而不看。唯一讓酒吧更苗條.padding([]) // Add X axis var x = d3.scaleBand() .domain(groups) .range([0, width]) .padding([0.2]) svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x).tickSize(0)); //subgroups var xSubgroup = d3.scaleBand() .domain(subgroups) .range([0, x.bandwidth()]) .padding([0.05])這個想法是要有這樣的東西(這是用excel)圖像
1 回答

皈依舞
TA貢獻1851條經驗 獲得超3個贊
如果增加圖形的寬度,您將能夠增加條形之間的空間而不會縮小它們。沒有它,就沒有額外的空間來移動它們,因此默認情況下,條形會變薄。
在頂部提到的示例中,您有寬度和高度選項,增加寬度,然后填充。例如-
width = 800 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
....
// Add X axis
var x = d3.scaleBand()
.domain(groups)
.range([0, width])
.padding([0.2])
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).tickSize(0));
//subgroups
var xSubgroup = d3.scaleBand()
.domain(subgroups)
.range([0, x.bandwidth()])
.padding([0.2])
工作示例 - https://codepen.io/puneet2412/pen/GRpQKzQ
然后,您可以嘗試根據需要更改填充。
添加回答
舉報
0/150
提交
取消