Длинная серия переходов D3 - структура кода - PullRequest
Новая
       19

Длинная серия переходов D3 - структура кода

1 голос
/ 30 сентября 2019

Конспект

В настоящее время я работаю над проектом, в котором я использую D3 для рассказывания историй. Для этого я создаю серию графов d3 и определяю логику перехода между графами. Хотя я новичок в программировании JS, я очень доволен своим прогрессом. Тем не менее, мой код становится очень раздутым и повторяющимся. Поэтому я пытаюсь найти лучшую структуру для моего кода в будущем.

Текущая структура кода

Для каждого графика я определяю функцию, которая рисует этот график с нуля. Эта функция принимает элемент html в качестве аргумента и вставляет график в DOM как дочерний элемент этого элемента. Эти функции используются для инициализации последовательности графов и для событий изменения размера.

Я также определяю логику перехода с другим «семейством» функций. Они берут существующий граф и преобразуют его в другой, используя переходы d3.

Наконец, я определяю функции getCurrentGraph() и setCurrentGraph(), чтобы логика изменения размера знала, какой граф рисовать. Эти функции используются внутри всех других функций. Например, transitionGraph1Graph2() вызывает setCurrentGraph("graph2"). 

// draw (or redraw) graphs
function drawGraph1(el) {};
function drawGraph2(el) {};
function drawGraph3(el) {};

// transition logic
function transitionGraph1Graph2(el, duration) {};
function transitionGraph2Graph3(el, duration) {};
function transitionGraph2Graph1(el, duration) {};
function transitionGraph3Graph2(el, duration) {};

// get/set a key for the current graph via the DOM
function getCurrentGraph() {};
function setCurrentGraph(graph = "graph1") {};

Затем я использую замыкание, чтобы убедиться, что все функции ограничены одним .js файлом. Я только хочу представить логику перехода для глобальной области.

graphsequence.js 

graphSequence = function(el = document.getElementById("graphContainer"),
                         duration = 1000) {
  // draw (or redraw) graphs
  function drawGraph1(el) {};
  function drawGraph2(el) {};
  function drawGraph3(el) {};

  // transition logic
  function transitionGraph1Graph2(el = el, duration = duration) {};
  function transitionGraph2Graph3(el = el, duration = duration) {};
  function transitionGraph2Graph1(el = el, duration = duration) {};
  function transitionGraph3Graph2(el = el, duration = duration) {};

  // get/set a key for the current graph via the DOM
  function getCurrentGraph() {};
  function setCurrentGraph(graph = "graph1") {};

  // handle resize events
  window.addEventListener("resize", function() {
    switch (getCurrentGraph()) {
      case "graph1": drawGraph1(el) [break;]
      case "graph2": drawGraph2(el) [break;]
      case "graph3": drawGraph3(el) [break;]      
    }
  });

  // initialize the graph sequence
  drawGraph1(el, duration);

  // expose callbacks for transitioning to the global scope
  return {
    transitionGraph1Graph2: transitionGraph1Graph2,
    transitionGraph2Graph3: transitionGraph2Graph3,
    transitionGraph2Graph1: transitionGraph2Graph1,
    transitionGraph3Graph2: transitionGraph3Graph2
  }
}();

index.html 

<div id = "graphContainer"></div>
<script src="graphsequence.js"></script>
<button onclick="graphSequence.transitionGraph1Graph2()">Transition Graph!</button>

Вопросы

Во-первых, я хочу подчеркнуть, что мой текущий код работает очень хорошо, и я не пытаюсь устранить ошибку. Я прошу совета о том, как структурировать мой код, чтобы проект в дальнейшем можно было поддерживать.

  • Мне кажется, что текущая реализация очень повторяет. Есть ли способ высушить этот рабочий процесс и определить логику в более сжатой форме?
  • События, инициирующие переходы, создаются с помощью scrollama.js. Существует ли какая-либо библиотека «scrollytelling», которая имеет специальную интеграцию D3, которая может быть использована для того, чтобы сделать код более структурированным?
  • Это хорошая идея, чтобы иметь всю эту логику в одном файле .js или следуетЯ пытаюсь разделить код, чтобы сделать проект более модульным?
  • В настоящее время я работаю без какой-либо инфраструктуры JavaScript. Я также не знаком с какими-либо основами для этого языка. Имеет ли смысл начинать использовать фреймворк для такого варианта использования? Если да, какие рамки рекомендуется и почему?
...