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>