在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);