Javascript ReactJS-SVG-交互式时间轴

我想在React中创建一个交互式时间线，如下所示：

常规信息：时间线显示从指定开始日期（顶部）到当前日期（底部）的项目。每个项目都有其发生的日期，并且应正确放置在可用的时间段内

为了简单起见，我只想重点介绍以下几点： 1.绘画 2.计算项目的位置

您能告诉我我的以下假设是否正确，或者您是否会提出不同的建议吗？

为了划清界限，我将使用SVG，而不使用任何进一步的npm模块。无论起始日期是什么（例如，无论时间线是从1991年还是2018年开始），该线看起来都是一样的

我想根据以下因素计算每个项目的位置：

---

2.1一个时隙等于一天（例如，如果时间线显示1/11-1/12，则整个SVG行将有30个时隙可用）

2.2一个时隙空间将为-100%线路长度/显示的总天数

2.3项目位置将根据时间线开始后的天数计算，这意味着2/11发生的项目将在第2/30时间段中显示

您是否建议再次回顾基本数学公式？：-） 除此之外，如果您以前做过类似的事情，并且您可以告诉我您知道的任何可能的香蕉皮，那将非常感谢！很高兴有关于这个的建议。

---

提前谢谢

我喜欢它的外观，所以我想我会为您提供一个快速演示，使用获取线条长度和沿线的点。这是一个非常方便的小界面。运行以下代码段以查看其运行情况：

class SVGThingy扩展了React.Component{
状态={
要点：[]，
};
componentDidMount（）{
const lineLength=this.path.getTotalLength（）；
const spanLength=线宽/30；
常量点=新数组（31）。填充（“”）
.map（（p，i）=>this.path.getPointAtLength（i*spanLength））；
this.setState（{points}）
}
render（）{
返回(
this.path=p}fill=“none”stroke=“red”strokeWidth=“1”d=“M 5.3 34.7 C 5.3 34.7 238.6-29.5 232.6 23 C 222.4 114.6 5.3 12.3 2.9 83.9 C 0.5 155.5 232.3 40 230.8 106.1 C 228.7 190.2 4.3 100 4.1 158.9 C 3.9 218.4 241.9 127.9 193 194.9”/>
{this.state.points.map（（p，i）=>(
))}
);
}
}
render（，document.getElementById（“react”）

2.1一个时隙等于一天（例如，如果时间线显示1/11-1/12，则整个SVG行将有30个时隙可用），我认为应该有23个时隙，您能解释一下如何得到30个吗？嘿，谢谢您的评论。为了仔细检查，我刚刚打开日历，数了数周（1/11-7/11=7，8/11-14/11=7，15/11-21/11=7，22/11-28/11=7，加上29/11和30/11。你怎么会到23？抱歉，你只计算了工作日吗？作为背景，这个时间线是针对社交媒体应用程序的，它实际上显示了用户对某些事件的记忆。所以整周计算：-）嘿，很抱歉回复太晚。我今天就可以开始了，而且效果很好。我非常感谢你的努力！帮助我轻松开始了！再次感谢！