在 Protovis 中绘制负数的正确方法是什么？答案

【问题标题】：What the right way to graph negative numbers in Protovis?在 Protovis 中绘制负数的正确方法是什么？
【发布时间】：2011-07-21 20:54:01
【问题描述】：

对于最简单的用例，一个值范围从 -10 到 10 的条形图，如何使用 Protovis JavaScript 图表库干净地编码？

我的意思是使轴居中，显示 x 和 y 轴标签，并表示图表的列值，其中负值低于 y 轴，正值超过 y 轴。

【问题讨论】：

【解决方案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);

【讨论】：