如何将刻度与水平条形图/行图中的条对齐答案

【问题标题】：How to align ticks with bars in horizontal bar chart / row chart如何将刻度与水平条形图/行图中的条对齐
【发布时间】：2014-06-26 16:39:18
【问题描述】：

我创建了一个水平条形图/行图，并且正在努力将 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

【问题讨论】：

标签： d3.js

【解决方案1】：

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

当您使用带有rangeRoundBands 的序数刻度时，d3 会为您计算一个带大小。您应该将此值用于条形高度。您可以使用ordinal.rangeBand 或在您的特定情况下使用yScale.rangeBand 访问为您的频段计算的值。

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

为避免所有条相互接触，您可以为 rangeRoundBands 方法提供第二个参数，即条带之间的填充。调整填充值，直到获得所需的输出。

这是更新后的JSFiddle

【讨论】：