D3js增加X軸之間的空間

Question

我正在嘗試增加 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）圖像

Answer 1

如果您增加圖表的寬度，您將能夠增加條形之間的空間而不會縮小它們。 沒有它，就沒有額外的空間來移動它們，所以默認情況下這些條會變細。

在您在頂部提到的示例中，您有寬度和高度選項，增加寬度然后填充。 例如-

  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

然后，您可以嘗試根據您的要求更改填充。