Question

我正在尝试使用D3文档here提供的示例来增加X轴上的标签之间以及X子组之间的空间。

我一直在尝试编辑代码的这一部分而没有外观。 .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

如果增加图形的宽度，您将能够增加条形之间的间隔而无需细化它们。没有它，将没有多余的移动空间，因此默认情况下，条形会变细。

在上面提到的example中，您有宽度和高度选项，先增加宽度，然后再填充。例如

  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

然后您可以根据需要尝试更改填充。

D3js增加X轴之间的空间

1 个答案: