Javascript 对于条形图，始终将条形图居中于序号上

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

然后创建条形图的一种常见方法是将矩形附加到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()))

---

有没有一种更简单的方法可以在保持对齐的同时控制条的大小？

我发现控制条的大小和居中的最好方法是不要乱动

rect

的x/y或width/height属性，而是使用

rangeBands（）

或

rangeRoundBands（）

中的填充参数。下面是一些绘制性别数据的示例图表：

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

var yScale=d3.scale.ordinal（）.rangeRoundBands（[0，chartHeight]）

水平图表（2条），带内填充的序号
var yScale=d3.scale.ordinal（）.rangeRoundBands（[0，图表高度]，.7）

水平图表（2条），序号，带内部和外部填充
var yScale=d3.scale.ordinal（）.rangeRoundBands（[0，图表高度]，.5，.1）

此方法将允许您调整条的大小，同时保持与序号的对齐。
不清楚您想要实现什么。您想根据条数修改条的高度吗？@Larskothoff基本上是的，我希望它们始终以
yScale（d）
返回的值为中心。一个额外的好处是建立一个最大高度值，所以如果一个图表只有两个条形，我不希望它们太大。这听起来根本不像一个条形图。你能制作一张模型图让我们更好地了解你在寻找什么吗？@Larskothoff说得很清楚，我这里说的是水平条形图，而不是垂直条形图，所以“条形高度”可以被认为是“条形宽度”。啊，好的，这更有意义。那么你已经有了身高的东西了，对吧？仍然不确定你的意思是定心虽然-你想要X轴在中间的酒吧？
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()))