ReactJS

Question

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

一般信息：时间轴显示从指定开始日期（顶部）到当前日期（底部）的项目。每个项目都有一个发生日期，应正确放置在可用 time-slots.

内

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

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

总而言之，我将使用 SVG，而无需任何其他 npm 模块。无论开始日期如何（例如，无论时间线是从 1991 年还是从 2018 年开始），这条线看起来都一样
我想根据以下因素计算每个项目的位置：

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

2.2 一个时隙 space 将是 - 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>

ReactJS - SVG - 交互式时间线

ReactJS - SVG - Interactive Timeline

javascript

svg

timeline