1

我有一个在条形图中使用的 D3 序数比例:

var y = d3.scale.ordinal().rangeRoundBands([0, height], .1);

我这样称呼它来定位许多g元素,一个用于条形图中的每个条形:

var barEnter = bar.enter()
  .insert("g", ".axis")
  .attr("class", "bar")
  .attr("transform", function(d, i) {
    return "translate(0," + (y(d.State) + height) + ")";
  });

当有许多条时,它的效果非常好,因为它们分布均匀。

在此处输入图像描述

但是,它可以工作,但当只有几个条时看起来不太好:

在此处输入图像描述

有没有办法我可以修改y函数或transform属性,以便transform在只有几条时更明智地设置?我不完全理解序数比例在幕后做了什么。

4

1 回答 1

0

为了他人的利益,我就是这样解决的。

我意识到问题发生在 y 比例域中只有几个元素时。所以我最终填充了规模的域,如下所示:

if (ydomain.length < 12) {
  for (var i = ydomain.length; i < 12; i++) {
    ydomain.push('y_' + i);
  }
}
y.domain(ydomain);

我怀疑这是最优雅的做事方式,但它确实有效。

于 2013-04-11T09:08:34.303 回答