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