简单的条形图和轴并排。 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. I've added some additional code on your codepen. It's viable if your graph has static values. Check it out here。我在包含栏和标题的 div 上添加了这个自定义 class。

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

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

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

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

simple barchart and axis are side by side. SVG graph

html

javascript

css

svg

reactjs