refactor: main roads

src/layers/renderers/drawRoutes.ts

@@ -0,0 +1,23 @@
+import * as d3 from "d3";
+
+import {round} from "utils/stringUtils";
+
+export function drawRoutes() {
+  routes.selectAll("path").remove();
+
+  const lineGen = d3.line().curve(d3.curveBasis);
+
+  const routePaths: Dict<string[]> = {};
+
+  for (const {i, type, cells: routeCells} of pack.routes) {
+    const points = routeCells.map(cellId => pack.cells.p[cellId]);
+    const path = round(lineGen(points)!);
+
+    if (!routePaths[type]) routePaths[type] = [];
+    routePaths[type].push(`<path id="${type}${i}" d="${path}"/>`);
+  }
+
+  for (const type in routePaths) {
+    routes.select(`[data-type=${type}]`).html(routePaths[type].join(""));
+  }
+}

src/layers/renderers/index.ts

@@ -16,6 +16,7 @@ import {drawPrecipitation} from "./drawPrecipitation";
 import {drawProvinces} from "./drawProvinces";
 import {drawReligions} from "./drawReligions";
 import {drawRivers} from "./drawRivers";
+import {drawRoutes} from "./drawRoutes";
 import {drawStates} from "./drawStates";
 import {drawTemperature} from "./drawTemperature";
 
@@ -37,6 +38,7 @@ const layerRenderersMap = {
   provinces: drawProvinces,
   religions: drawReligions,
   rivers: drawRivers,
+  routes: drawRoutes,
   states: drawStates,
   temperature: drawTemperature
 };