D3js increase space between X axis

Question

I'm trying to increase the space between the labels in the X axis and also the X subgroups I'm using the example provided by D3 documentation here

I've been trying to edit this part of the code without look. The .padding([]) only makes the bar more slim

  // 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])

the idea is to have something like this (this was with excel) image

Answer 1

You will be able to increase the space between bars without slimming them if you increase the width of the graph . without it there is no extra space for moving them so the bars will get slim by default.

In the example you mentioned on the top you have width and height options, increase the width and then padding. Eg-

  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])

Working example - https://codepen.io/puneet2412/pen/GRpQKzQ

You can then try to change padding as per your requirement.