D3jsのSVGパス生成文字列の簡略化

Question

私は驚くべきD3jsジオモジュールを使用して生成しているSVGを少し最適化しようとしています。

私はSVGパスのd属性発生器としてd3.geo.pathを使用しています：

path = d3.geo.path().projection(config.projection); // projection is initialized somewhere else 

してから、このようなパスをレンダリングするためにそれを使用して：

svg.selectAll(".country") 
    .data(countries) 
    .enter() 
    .insert("path", ".graticule") 
    .attr({ 
     class: "country", 
     d: path 
    }) 

と私は取得していますパス文字列の種類次のようなものです：

M713.601085,459.8780053259876L714.7443994399441,460.08170562468473L715.0310281028103,460.5903728431771L715.0310281028103... 

このように、数字はあまりにも多く、現在の解像度ではあまり役に立ちません。私の現在の解像度ではあまり役に立ちません。DOMを少し詰まらせ、これらのパスをデバッグするのが遅くなります（多くの国があります。 ）。

だから私の最初のアプローチはpathため、このpathSimplifiedラッパー作成した後、

// Path simplified: take some decimals out of the 'd' string 
pathSimplified = function (d) { 
     return path(d).replace(/(\.\d{4})\d+/g, '$1'); 
    }; 

とpathの代わりに使用：

//... 
    .attr({ 
     class: "country", 
     d: pathSimplified 
    }) 

動作し、今私は、各値のための唯一の4小数を取得パス文字列に。このように：

M713.6010,459.8780L714.7443,460.0817L715.0310,460.5903L715.0310... 

私の質問は：それは、より良い、より少ないハックの方法で行うことができますか？それは、D3jsのpath関数によって吐き出された後に文字列を微調整するのが正しいとは思わないし、パス自体または投影上のある点で丸めを指定すると良いでしょう...

Answer 1

あなたの考えは良いですポリラインが役立ちますが、座標を切り捨てるだけではなく、ポリラインのセミプレーニングのアルゴリズムが存在し、より良い結果が得られるかもしれません。

たとえば、Ramer-Douglas-Peucker algorithmをご覧ください。それはSimplify.jsのようなライブラリに実装されています（そのページのデモをチェックしてください）。 x/y座標の配列として行を渡す必要がありますが、それはあまり複雑ではないと信じています。

d3ジオ予測で精度パラメータ（たとえばhereなど）が使用できることに気付きました。あなたが見落としたようなものがありますか？いずれの場合でも、通常はsimplify.jsを使用して自分で座標を単純化することは通常可能です。