javascript - ReactJS - SVG - 交互式时间线

Question

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

一般信息:时间线显示从指定开始日期(顶部)到当前日期(底部)的项目。每个项目都有一个发生日期，并且应该正确放置在可用的时间段内。

为了简单起见，我只想重点关注以下内容:1. 绘图2.计算item的位置

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

1. 为了划清界限，我将使用 SVG，而不使用任何其他 npm 模块。无论开始日期是什么(例如，无论时间线是从 1991 年开始还是 2018 年开始)，这条线看起来都一样
2. 我想根据以下因素计算每个项目的位置:

2.1 1 个时间段等于 1 天(例如，如果时间线显示 1/11 - 1/12，则整个 SVG 系列将有 30 个可用时间段)

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

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

您是否还建议再次回顾基本数学公式？:-)除此之外，如果您以前做过类似的事情，并且可以让我知道您所知道的任何可能的香蕉皮，我们将不胜感激!很高兴对此有任何建议。提前致谢!

Answer 1

我喜欢它的外观，所以我想我应该使用 SVGGeometryElement API 为您制作一个快速演示。获取线长度和沿线的点。这是一个非常方便的小界面。运行以下代码片段以查看其实际效果:

class SVGThingy extends React.Component {
  state = {
    points: [],
  };
  
  componentDidMount(){
    const lineLength = this.path.getTotalLength();
    const spanLength = lineLength / 30;
    const points = new Array(31).fill('')
      .map((p,i) => this.path.getPointAtLength(i * spanLength));
    this.setState({points})
  }

  render() {
    return (
      <svg viewBox="0 0 240 200" width="240px" height="200px" >
        <path ref={p => 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)=> (
          <circle cx={p.x} cy={p.y} r="3" stroke="black" strokeWidth="2" fill="white"/>
        ))}
      </svg>
    );
  }
}


ReactDOM.render( <SVGThingy />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="react"></div>