条形图的序数始终居中答案

【问题标题】：Always center bar on ordinal for bar charts条形图的序数始终居中
【发布时间】：2014-10-16 16:44:46
【问题描述】：

假设你有一个 d3.js 比例尺（我们在这里假设水平条形图）

var yScale = d3.scale.ordinal()
            .rangeRoundBands([0,height]); //height of chart

然后创建条的常用方法是将矩形附加到您的 svg。下面是一些常见的示例代码。我已经排除了其他各种属性，以便只关注y 和height：

svg.selectAll(".bar")
  .data(data)
.enter().append("rect")
  .attr("y", function(d) { return yScale(d); })
  .attr("height", yScale.rangeBand());

但是，对于只有 2-3 个元素的图表，它会导致每个波段都非常大。我想启用“maxBarHeight”规定，但我无法确保条形图始终以序数为中心。这是我目前所拥有的：

svg.selectAll(".bar")
  .data(data)
.enter().append("rect")
  .attr("y", function(d) {
    if(yScale.rangeBand() > maxBarHeight)
      return yScale(d) + (maxBarHeight / 2); //This doesn't work
    else
      return yScale(d);
  })
  .attr("height", (yScale.rangeBand() > maxBarHeight ? maxBarHeight : yScale.rangeBand()))

有没有更简单的方法来控制条形尺寸同时保持对齐？

【问题讨论】：

不清楚您要达到的目标。是否要根据条的数量修改条的高度？
@LarsKotthoff 基本上是的，我希望它们始终以yScale(d) 返回的值为中心。一个好处是建立一个最大高度值，所以如果一个图表只有两个条，我不希望它们很大。
这听起来根本不像条形图。您能否制作一张模型图片，让我们更好地了解您在寻找什么？
@LarsKotthoff 澄清一下，我在这里说的是水平条形图，而不是垂直图，所以“条形高度”可以被认为是“条形宽度”。跨度>
啊好吧，这更有意义。所以你已经有了身高，对吧？仍然不确定居中是什么意思——你想让 x 轴在条的中间吗？

标签： javascript svg d3.js bar-chart rect

【解决方案1】：

我发现控制条形大小和居中的最佳方法是不要乱用 rect 的 x/y 或宽度/高度属性，而是使用 rangeBands() 或 @ 中的填充参数987654326@。下面是一些绘制性别数据的示例图表：

水平图表（2 条），默认序数

var yScale = d3.scale.ordinal().rangeRoundBands([0,chartHeight]);

水平图表（2 条），带内部填充的序数

var yScale = d3.scale.ordinal().rangeRoundBands([0,chartHeight],.7);

水平图表（2 个条形图），带有内外填充的序数

var yScale = d3.scale.ordinal().rangeRoundBands([0,chartHeight],.5,.1);

此方法可让您调整条形大小，同时保持与序数对齐。

【讨论】：