简单的条形图和轴并排。 SVG 图

Question

我在下面的代码笔https://codepen.io/a166617/pen/qBXvzQd中有一个堆积条形图

您可以看到 codepen，它没有在 x 轴和 y 轴线上显示图形。条形图向右滑动。有人可以告诉我如何将条形图放在图形的 x 轴和 y 轴上吗？

<g class="grid x-grid" id="xGrid">
  <line x1="90" x2="90" y1="5" y2="371"></line>
</g>
<g class="grid y-grid" id="yGrid">
  <line x1="90" x2="705" y1="370" y2="370"></line>
</g>

实现x轴和y轴直线的代码如下。但不知何故，图表没有显示在线轴上。有人可以指导我哪里出错了吗？

Answer 1

我解决这个问题的方法是使用css positioning。我在你的 codepen 上添加了一些额外的代码。如果您的图表具有静态值，则它是可行的。看看here。我已在包含条形图和标题的 div 上添加了这个自定义类。

.mGraph > svg {
  position: relative;
  left: -40rem;
  top: -.65rem;
}

.mGraph > div {
  position: relative;
  left: -40rem;
  top: -.65rem;
}

.mGraph > text {
  position: relative;
  left: -50rem;
}