Как нарисовать вертикальную диаграмму площади? - PullRequest
0 голосов
/ 17 января 2019

Как нарисовать вертикальную область в d3? что-то вроде я нарисовал красным цветом:

enter image description here

Какой здесь лучший подход? Я не могу найти примеры в интернете.

1 Ответ

0 голосов
/ 17 января 2019

На самом деле, как вы говорите, в большинстве примеров диаграмм областей (я бы сказал, практически все) используется горизонтальная область, то есть версия, где базовая линия горизонтальна.

Однако очень просто создать вертикальную диаграмму области (то есть с вертикальной базовой линией), используя 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: базовый уровень
...