在SVG时间轴Vue组件中处理日期

Question

我正在构建作为时间轴的Vue组件。时间轴部分是SVG，这是我第一次接触SVG，因此其中一些概念尚不清楚。

我的主要问题是如何将时间线的“日期线”部分与实际的时间线部分相关联，有2个单独的组件，但是它们中继相同的数据，而且在日期线周围还会有一些填充，以用于外观以及日期外观更远的一端。

下面的项目在1/1/2021结束，您可以看到它似乎要到9月才到期，但日期变更本身要到2022年4月。

该组件接收到一系列带有Start_Date和End_Date的对象，然后将它们循环浏览，我们获得了第一个开始日期和最后一个结束日期。但是，截止日期已经过去了一年。我不确定如何使用以上时间轴中显示的日期来纠正此问题。

什么是解决此问题的好方法，我试图了解如何本地执行此操作，所以我不想使用其他时间轴库。

下面是时间轴

    <template>
    <svg :viewBox="viewBox" class="inlineSVG">
      <g>
        <rect
          v-if="stage.endDate"
          ref="popper"
          class="row:stage stageBar"
          :x="xOffset"
          :y="yOffset"
          :height="barHeight"
          :width="barWidth"
          :style="stageColor"
        />
        <rect
          class="row:event"
          v-for="(event, idx) in stage.events"
          v-bind="computeEventCoords(event, idx, stage.events.length)"
          :key="event.meta.eventId"
          @click="handleEventClick(event)"
        />
      </g>
    </svg>
</template>

下面是日期栏

<template>
  <div id="dateLine">
    <div id="yearArea">
      <ul class="dateList">
        <li v-for="year in years">
          <span class="yearSpan">
            <year-icon class="yearIcon" />
            <span class="yearText">{{year}}</span>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

布局是使用Grid完成的，因此这是一个2x2的网格，这就是它们彼此之间的关系。