ReactJS-SVG-交互式时间表

Question

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

常规信息：时间轴显示从指定的开始日期（顶部）到当前日期（底部）的项目。这些项目的日期分别为发生日期，应正确放置在可用的时隙内。

为简单起见，我只想关注以下几点： 1.图纸 2.计算物品的位置

是否可以让我知道我的以下假设是否正确，或者您是否建议其他途径？

1. 要划清界限，我将使用SVG而不使用任何其他npm模块。无论开始日期是什么（例如时间轴是从1991年还是2018年开始），该行的外观都相同
2. 我要基于以下因素来计算每个项目的位置：

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

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>