d3.js 垂直绘制条形图

Question

所以我要做的是在我已经创建的条形图下方绘制一个条形图。

所以这是我最初使用的比例

  this.visScale = d3.scaleBand()
      .domain(['Q1', 'Q2', 'Q3', 'Q4', 'OT'])
      .range([this.dims.margins.left, this.dims.width - this.dims.margins.right])
      .paddingInner(0.1);

这在理论上将 SVG 分成 5 块，但问题是它不会仅在水平方向上垂直扩展。

我尝试多次更改范围，但无济于事。

这是我试图实现的目标的草图。

需要更多信息，请询问。

Answer 1

所以我自己设法解决了这个问题。

 this.visScale = d3.scaleBand()
  .domain([1, 2, 3, 4]) // q1, q2, q3, q4
  .range([this.dims.margins.top, this.dims.height - this.dims.margins.bottom])
  .paddingInner(0.05)
  .paddingOuter(0);

this.xScale = d3.scaleBand()
  .domain([1, 2, 3, 4])
  .paddingInner(0.05)
  .paddingOuter(0)
  .range([this.dims.margins.left, this.dims.width - this.dims.margins.right]);

this.scoreScale = d3.scaleLinear()
  .domain([-5, 10])
  .range([0, this.visScale.bandwidth()]);

这包括垂直轴，例如分数比例，但我们可以通过数字 1 - 4 指定，这将改变 y 位置。