6

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

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

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

svg 文字列の圧縮 (gzip など) に関する情報はたくさんありますが、ノードを減らして実際にパスを単純化するアルゴリズムについてはほとんどありません。

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

4

1 に答える 1

12

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)
于 2012-12-06T06:32:04.787 に答える