javascript - 长系列的 D3 转换 - 代码结构

Question

概要

我目前正在做一个使用 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文件中。我只想将转换逻辑暴露给全局范围。

图序列.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
  }
}();

索引.html

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

问题

首先，我想强调我当前的代码运行良好，我并不是要解决错误。我正在就如何构建我的代码寻求建议，以保持项目的长期可维护性。

• 我觉得目前的实施非常重复。有没有办法干掉这个工作流程并以更简洁的方式定义逻辑？
• 触发转换的事件是用scrollama.js. 是否有任何“scrollytelling”库具有 D3 的特殊集成，可用于使代码更有条理？
• 将所有这些逻辑放在一个.js文件中是个好主意，还是我应该尝试拆分代码以使项目更加模块化？
• 目前，我在没有任何 javascript 框架的情况下工作。我也不熟悉该语言的任何框架。开始为这样的用例使用框架是否有意义？如果是，推荐使用哪些框架，为什么？

标签： javascriptd3.jstransition