ノード数を減らしてSVGパス文字列を簡略化する

Question

折れ線グラフを表す大きなSVGパス文字列を生成しています。

グラフの下には、時間範囲スライスを選択するためのスライダがあります。スライダーの後ろには、折れ線グラフのミニプレビューがあります。

私は現在、プレビューを生成するためにパスを縮小していますが、そうすることで、ピクセルあたり数十のノードで終わってしまいます。したがって、もっと詳細が必要です。もちろんこれにより、ブラウザはそれ以上のレンダリングを行うことができます。

svg文字列（gzippingなど）の圧縮には多くの情報がありますが、実際にはノードを減らすことでパスを単純化するアルゴリズムはほとんどありません。

私はRaphaeljsを使用しており、javascriptベースのソリューションを探しています。何か案は？

Answer 1

Simplify.jsおそらくあなたが見ているものです。あなたの折れ線グラフが唯一の直線セグメントで構成さを考えると

（その定義により、それがなければならない）、あなたはこのようにそれを使用することができます：

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)