双X轴条形图和折线图中带有Vue的D3

Question

我正在尝试使用d3和vue构建包含条形图和折线图的图形。我需要在同一张图中显示条形图和折线图，但是在2个单独的x轴上，如下图所示，有人可以解决此问题吗？我做了线图，但是我想添加轴图和条形图，但是我很困惑该怎么做 Image for graph example

  <svg width="500" height="270">
    <g style="transform: translate(0, 10px)">
      <path :d="line"></path>
    </g>
    <g style="transform: translate(0, 70px)">
      <path :d="line2"></path>
    </g>
  </svg>
</template>

<script>
import * as d3 from "d3";
export default {
  name: "Chart",
  data() {
    return {
      data: {
        recerved: [99, 71, 78, 25, 36, 92],
        output: [100, 15, 78, 15, 36, 9]
      },
      line: "",
      line2:""
    };
  },
  mounted() {
    this.calculatePath();
  },
  methods: {
    getScales() {
      const x = d3.scaleTime();
      const y = d3.scaleLinear();
      d3.axisLeft().scale(x);
      d3.axisBottom().scale(y);
      x.domain(d3.extent(this.data.recerved, (d, i) => i));
      y.domain([0, d3.max(this.data.recerved, d => d)]);
      return { x, y };
    },
    getScales1() {
      const x = d3.scaleTime();
      const y = d3.scaleLinear();
      d3.axisLeft().scale(x);
      d3.axisBottom().scale(y);
      x.domain(d3.extent(this.data.output, (d, i) => i));
      y.domain([0, d3.max(this.data.output, d => d)]);
      return { x, y };
    },
    calculatePath() {
      const scale = this.getScales();
      const scale1 = this.getScales1();
      const path = d3
        .line()
        .x((d, i) => scale.x(i))
        .y(d => scale.y(d));
      const path2 = d3
        .line()
        .x((d, i) => scale.x(i))
        .y(d => scale1.y(d));
      this.line = path(this.data.recerved);
      this.line2 = path2(this.data.output);
    }
  }
};
</script>

<style  scoped>
svg {
  margin: 25px;
}

path {
  fill: none;
  stroke: #76bf8a;
  stroke-width: 3px;
}
</style>