javascript - Protovisで負の数をグラフ化する正しい方法は何ですか？

Question

最も単純なユースケースである-10から10の範囲の値を持つ棒グラフの場合、Protovis JavaScriptチャートライブラリを使用してこれをクリーンにコーディングするにはどうすればよいですか？

きれいに言うと、軸を中央に配置し、x軸とy軸のラベルを表示し、負の値がy軸を下回り、正の値がy軸を超えるチャートの列値を表すことを意味します。

Answer 1

これが実際の例です：http：//jsfiddle.net/nrabinowitz/yk5By/3/

これの重要な部分は次のとおりです。

• 最小値から最大値までのx軸スケールを作成します（あなたの場合はpv.Scale.linear(-10,10).range(0,w)、データに基づいて最小値と最大値を計算します）。

• バーの幅は、0からのデータムの絶対距離に基づいています。

  .width(function(d) { return Math.abs(x(d) - x(0)); })
  

• .left()次に、データムが正か負かに基づいてプロパティを調整します。

  .left(function(d) { return d > 0 ? x(0) : x(0) - this.width(); });
  

• 単純なx軸スケールを使用しているため、軸ラベルの追加は非常に簡単です。

  vis.add(pv.Label)
      .data(x.ticks()) // you could also use pv.range(min, max, 1) here
      .left(x);