d3js столбец диаграммы высоты ошибка

Question

Я пытаюсь реплицировать this simple column bar chart в d3 за исключением также использовать отрицательные значения. Я смог выяснить, как использовать отрицательные значения, но теперь моя ось, кажется, выключена. Я думаю, что это, вероятно, то, что я делаю с значениями y.

Вот где я рисую бары:

var chart = d3.select("body").append("svg") 
     .attr("class","chart") 
     .attr("width", w * data.length - 1) 
     .append("g") 
     .attr("height", h); 


chart.selectAll("rect") 
    .data(data) 
    .attr("class","rect") 
    .enter().append("rect") 
    .attr("x", function(d, i) { return x(i) - .5; }) 
    .attr("y", function(d) { return h - y(d.value) - .5; }) 
    .attr("width", w) 
    .attr("height", function(d) { return Math.abs(y(d.value) - y(0)); }); 

и вот скрипку со всем: http://jsfiddle.net/Y4wAC/2/

Я просто хочу, чтобы ось х на 0 и все бары, происходящие из x-axis, который, вероятно, очень прост, но я n00b

спасибо!

Answer 1

Для этого вам необходимо переместить линию, отрегулировав координату y. В вашем случае, это легче всего сделать путем вычитания из y(0)height, т.е.

.attr("y1", h - y(0)) 
.attr("y2", h - y(0)) 

Изменено jsfiddle here.

Answer 2

Хитрость заключается в том, чтобы перевернуть домен на у масштаба, так что вы работаете от 0 до часов и работы с позиции y0, как уже упоминалось Lars:

var height = function(d){ return Math.abs(y(d.value) - y(0));} 
var ypos = function(d){return d.value < 0 ? y(0) : y(0) - height(d);} 

http://jsfiddle.net/XryuS/

Большая разница добавив некоторую логику для вычисления ypos для отрицательных значений, которые находятся ниже точки y0. Это также должно отражаться при вычислении высоты.

Ваш пример работал с y0 на дне контейнера, что означает, что для наименьшего значения (-3) ваш пример нарисовали прямоугольник от 0 до 30, а не от 70 до 100.