D3 js увеличить расстояние между осью 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) image

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

Затем вы можете попробовать изменить отступы в соответствии с вашими требованиями.