iT邦幫忙

0

【已解決】【D3.js】xScale的padding要怎麼設定?

  • 分享至 

  • xImage

大家好,
請問在畫長條圖時,資料有三個。
畫出的長條圖是三條。如下。
總寬是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
/images/emoticon/emoticon06.gif
我無法理解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的寬度,跟官網說的不一樣阿..
所以決定棄用paddingpaddingInnerpaddingOuter
或許我哪邊出錯了吧?

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

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

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答