1

棒グラフで使用している D3 序数スケールがあります。

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

g棒グラフの棒ごとに 1 つずつ、多数の要素を配置するために、次のように呼び出します。

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 に答える