大家好，
請問在畫長條圖時，資料有三個。
畫出的長條圖是三條。如下。
總寬是266.5。所以每條分得的寬度是266.5/3 = 88.83。

 const xSubgroup = d3.scaleBand()
    .domain(['a','b','c'])
    .range([0, 266.5])
    .padding(0)

但我將padding = 0.5帶入時，如下

 const xSubgroup = d3.scaleBand()
    .domain(['a','b','c'])
    .range([0, 266.5])
    .padding(0.5)

理論上，每條長度都該減半成88.83*0.5 = 44.4嗎?
可是實際上會變成38.07

我無法理解38.07的公式是怎麼來的?

因為我想要自行設定 每根長條圖的寬度、跟每根之間的間距，
經由換算，再帶入到padding裡。
所以想請教一下，謝謝。

----參考chatGPT給的解答----
寬度就直接帶入.attr("width",barWidth)，
間距要帶到比例尺裡，barWidth + barSpace = 一個等份的寬度(此題是分三等份)
如果要置中，就計算一下paddingleft的值，帶入translate。

const barData = [{key:'a',value:1},{key:'b',value:2},{key:'c',value:3}]
const barTotal = barData.length
const barWidth = 30 //寬度
const barSpace = 5

//間距
const barGroupWidth = barWidth * barTotal + barSpace * (barTotal - 1)
const xSubgroup = d3.scaleBand()
    .domain(barData.map(obj=>obj['key'])) //三等份
    .range([0, barGroupWidth])
            
const paddingleft =  (xScale.bandwidth() - barGroupWidth ) /2
const bar = svg.append('g')
    .selectAll('g')
    .data(barData)
    .join('g')
    .attr('transform', d => `translate(${xScale(d)+paddingleft}, 0)`)
    .selectAll('rect')
    .data((e, index) => {
       ...
    })
    .join('rect')
    .attr('x', (d, i) =>xSubgroup(d['key']) )
    .attr("y", d => yScale(d['value']))
    .attr("width",barWidth ) // 寬度

話說，官網是說.padding(0.1)，表示每個bar都縮小10%，
但我試了好久，.padding(0.1)後，得到bar的寬度，跟官網說的不一樣阿..
所以決定棄用padding、paddingInner、paddingOuter。
或許我哪邊出錯了吧?

不過目前得到的結論是，如果想要精確的設定寬度，就不能使用padding。
如果只是想要畫面的美觀，給個間距(不然滿版很奇怪)，用padding可以快速解決。

ps.畫圖的參考來源是參考這篇:Day23－D3 基礎圖表：複數長條圖