时间戳

首页 > 解决方案 > D3js增加X轴之间的空间

javascript - D3js增加X轴之间的空间

问题描述

我正在尝试增加 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） 图像

标签： javascriptd3.js

解决方案

如果您增加图表的宽度，您将能够增加条形之间的空间而不会缩小它们。没有它，就没有额外的空间来移动它们，所以默认情况下这些条会变细。

在您在顶部提到的示例中，您有宽度和高度选项，增加宽度然后填充。例如-

  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

然后，您可以尝试根据您的要求更改填充。

推荐阅读