D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
johan
Full window
Github gist
SVG Path Cleaning
<!DOCTYPE html> <meta charset="utf-8"> <script src="https://d3js.org/d3.v2.js?2.9.1"></script> <svg viewBox="0 0 2000 1625.4" width="960" height="500"> <path fill="#52ade5" d="m2e3 192.42c-73.58 32.64-152.67 54.69-235.66 64.61 84.7-50.78 149.77-131.19 180.41-227.01-79.29 47.03-167.1 81.17-260.57 99.57-74.84-79.75-181.48-129.57-299.5-129.57-226.6 0-410.33 183.71-410.33 410.31 0 32.16 3.63 63.48 10.63 93.51-341.02-17.11-643.37-180.47-845.74-428.72-35.32 60.6-55.56 131.09-55.56 206.29 0 142.36 72.44 267.95 182.54 341.53-67.26-2.13-130.54-20.59-185.85-51.32-.04 1.71-.04 3.42-.04 5.16 0 198.8 141.44 364.64 329.15 402.34-34.43 9.38-70.68 14.4-108.1 14.4-26.44 0-52.15-2.58-77.2-7.36 52.22 163.01 203.75 281.65 383.3 284.95-140.43 110.06-317.35 175.66-509.6 175.66-33.12 0-65.79-1.95-97.88-5.74 181.59 116.42 397.27 184.36 628.99 184.36 754.73 0 1167.46-625.24 1167.46-1167.47 0-17.79-.41-35.48-1.2-53.08 80.18-57.86 149.74-130.12 204.75-212.41"/> </svg> <script> var svg = d3.select("svg"), path = svg.select("path"), segments = path.node().pathSegList, segment, x = 0, y = 0, points = [], n = segments.numberOfItems - 1, // drop Z i = -1; while (++i < n) { segment = segments.getItem(i); points.push(segment.pathSegType & 1 ? [x += segment.x, y += segment.y] : [x = segment.x, y = segment.y]); } svg.append("path") .style("fill", "none") .style("stroke", "red") .style("stroke-width", "1.5px") .attr("d", "M" + points[0] + "L" + points.slice(1).join(" ")); </script>
Modified
http://d3js.org/d3.v2.js?2.9.1
to a secure url
https://d3js.org/d3.v2.js?2.9.1