Гистограмма, которая не начинается с нуля

Question

У меня есть стек-блиц здесь - https://stackblitz.com/edit/d3-start-above-zero?embed=1&file=index.js&hideNavigation=1

Это супер простая гистограмма с одним баром

Ось Y показывает значения от 0-200

Значения для бара начинаются с 50 и заканчиваются на 150, поэтому я хотел нарисовать столбцы с этими значениями, чтобы столбец находился где-то в центре графика.

У меня вроде есть высота, но я не могу исправить положение y.

Answer 1

Вы можете выбрать диапазон от 0 до height ...

scale.range([0, height])

... или от height до 0 ...

scale.range([height, 0])

... но это не меняет того факта, что в SVG система координат оси y идет сверху вниз. Поэтому атрибут y должен быть всегда меньше , чем height для прямоугольника.

При этом вы должны использовать finish для атрибута y:

.attr("y", function (d, i) {
    return y(d.finish);
})
.attr("height", function(d,i){
    return y(d.start) - y(d.finish);
});

Вот обновленный код: https://stackblitz.com/edit/d3-start-above-zero-qnk7bl?file=index.js