Simplifying SVG path strings by reducing number of nodes

Question

I am generating a large SVG path string that represents a line chart.

Beneath the chart I have a slider for selecting a time range slice. Behind the slider is a mini pr

Answer 1

Simplify.js is probably what you're looking after.

Given your line chart consists of straight line segments only (which by definition it should), you can use it like this:

  var tolerance = 3
  var pathSegArray = []
  for (var i=0; i<path.pathSegList.numberOfItems; i++) {
    pathSegArray.push(path.pathSegList.getItem(i))
  }
  var newPathArray = simplify(pathSegArray,tolerance)
  var newD = "M";
  for (i=0; i<newPathArray.length; i++) {
    newD += newPathArray[i].x + " " + newPathArray[i].y + " "
  }
  path.setAttribute("d",newD)