Как правильно составить график отрицательных чисел в Протовисе?

Question

Для простейшего варианта использования - гистограмма со значениями в диапазоне от -10 до 10, как можно аккуратно ее кодировать с помощью библиотеки графиков JavaScript Protovis?

Под чистым словом я имею в виду центрирование оси,показывая метки оси 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);