31:T4fe,correctPathString = (pathString) => { // 1. Convert relative commands to absolute commands const pathArray = snap.path.toAbsolute(pathString); // 2. Convert H and V commands to Line to's` const { length } = pathArray; const lineToCommandsPathArray = [pathArray[0]]; for (let prevIndex = 0, index = 1; index < length; prevIndex++, index++) { if (pathArray[index][0] === "H") { const x = format(pathArray[index][1]); const y = format(pathArray[prevIndex][2]); const lineTo = ["L", x, y]; lineToCommandsPathArray.push(lineTo); } else if (pathArray[index][0] === "V") { const prevCommand = pathArray[prevIndex][0]; // if (prevCommand === "H") let x, y; if (prevCommand === "V") { x = pathArray[prevIndex - 1][1]; } else { x = pathArray[prevIndex][1]; } y = pathArray[index][1]; const lineTo = ["L", format(x), format(y)]; lineToCommandsPathArray.push(lineTo); } else { const [c, x, y] = pathArray[index]; lineToCommandsPathArray.push([c, format(x), format(y)]); } } const correctedPathString = lineToCommandsPathArray .map(([command, ...coords]) => `${command} ${coords.join(",")}`) .join(" "); return correctedPathString; }32:T1657,transitMap = svg``33:[] 2f:{"title":"Convert Some SVG Path Commands to Line to's","cells":[{"id":0,"value":"# Convert Some SVG Path Commands to Line to's\n\nPrep work for [The Hague Morphing Transit Map](/@julesblm/the-hague-morphing-transit-diagram)\n\n1. Convert relative commands to absolute commands\n2. Convert H and V commands to Line to's","pinned":false,"hidden":false,"mode":"md"},{"id":148,"value":"relativeLines = [...transitMap.children]\n .map(child => ({\n lijn: colorLijnMap.get(child.getAttribute(\"stroke\")),\n path: child.getAttribute(\"d\"),\n stroke: child.getAttribute(\"stroke\")\n }))\n .sort((d, e) => d3.ascending(+d.lijn, +e.lijn))","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"colorLijnMap = new Map([\n [\"#DA322A\", \"1\"],\n [\"#E8892D\", \"2\"],\n [\"#98297D\", \"3\"],\n [\"#F6BF35\", \"4\"],\n [\"#00A3DA\", \"6\"],\n [\"#84BF41\", \"9\"],\n [\"#AB836C\", \"11\"],\n [\"#E7B2C8\", \"12\"],\n [\"#7778AB\", \"15\"],\n [\"#6A3123\", \"16\"],\n [\"#004A86\", \"17\"],\n [\"#009D80\", \"19\"],\n [\"#777776\", \"34\"]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"// svg`\n// `","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"absoluteMoveToLines = relativeLines.map(d => ({\n stroke: d.stroke,\n path: correctPathString(d.path),\n lijn: colorLijnMap.get(d.stroke)\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"format = d3.format(\".4f\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"snap = require(\"snapsvg\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}