Question

我创建了一个水平条形图/行图，我正在努力将Y轴刻度与我的条形中心垂直对齐。

使用以下代码创建Y轴：

var yScale = d3.scale.ordinal()
  .domain(data.map(function (d) {
    return d.subject;
  }));
  .rangeRoundBands([0, height]);

  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

创建我的酒吧：

  // Render the bars
  svg.selectAll('bar')
    .data(data)
    .enter()
    .append('rect')
    .attr('x', 1)
    .attr('y', function (d) {
      return yScale(d.subject);
    })
    .attr('width', function (d) {
      return xScale(d.value)
    })
    .attr('height', barHeight)
    .attr('fill', function (d, i) {
      return color(i);
    });

我希望能够将图表的高度设置为任意值并正确对齐刻度线。

JSFiddle

Answer 1

您遇到的问题是您分配了40个单位的任意barHeight值。

当您使用rangeRoundBands的序数比例时，d3会为您计算波段大小。您应该将此值用于条形高度。您可以访问为ordinal.rangeBand或您的特定情况yScale.rangeBand计算的乐队价值。

// instead of `barHeight`
.attr('height', yScale.rangeBand);

为避免让所有条形图彼此接触，您可以为rangeRoundBands方法提供第二个参数，即带之间的填充。使用填充值，直到获得所需的输出。

这是更新后的JSFiddle

如何在水平条形图/行图中将刻度线与条形对齐

1 个答案: