На самом деле, как вы говорите, в большинстве примеров диаграмм областей (я бы сказал, практически все) используется горизонтальная область, то есть версия, где базовая линия горизонтальна.
Однако очень просто создать вертикальную диаграмму области (то есть с вертикальной базовой линией), используя D3. Для этого нужно использовать менее известные методы x1
и x0
генератора area .
Что происходит, так как почти все примеры в сети являются диаграммами горизонтальной области, вы видите только x
, y1
и y0
в качестве методов генератора области. Однако таким же образом только x
устанавливает x0
в значение, а x1
в null
, y
устанавливает y0
в значение и y1
в null
.
При этом вам просто нужно установить вертикальную базовую линию с помощью x0
. Проверьте этот пример:
const svg = d3.select("svg");
const data = [0, 80, 20, 210, 130, 270, 30, 110, 130, 0];
const areaGenerator = d3.area()
.x0(0)
.x1(d => d)
.y((_, i) => i * 15)
.curve(d3.curveMonotoneY)
const area = svg.append("path")
.attr("d", areaGenerator(data))
.style("fill", "teal");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>
Короче говоря, вам нужны следующие методы:
Горизонтальная диаграмма области :
x
: позиция в базовой линии
y1
: расстояние от базовой линии
y0
: базовый уровень
Диаграмма вертикальной области :
y
: позиция в базовой линии
x1
: расстояние от базовой линии
x0
: базовый уровень