Javascript 简化D3js'；SVG路径生成字符串

我正在尝试优化一点我正在使用神奇的D3js geo模块生成的SVG

我正在使用

d3.geo.path

作为SVG路径的

d

属性生成器：

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 simplified: take some decimals out of the 'd' string
pathSimplified = function (d) {
        return path(d).replace(/(\.\d{4})\d+/g, '$1');
    };

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

然后使用它而不是路径：

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

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

这是可行的，现在路径字符串上的每个值只有4位小数。像这样：

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

---

我的问题是：能不能用一种更好、更少的方式来做？在D3js的

path

函数吐出字符串后，调整字符串感觉不太对，最好在路径本身或投影上的某个点指定舍入…

您的想法很好，简化多段线有帮助，但您肯定可以做得比截断坐标更好：存在多段线符号化的算法，可能会给您带来更好的结果

例如，看一看。它是在库中实现的，比如（查看该页面上的演示），这也允许您使用容差对其进行调整。 您必须以x/y坐标数组的形式通过该行，但我相信这不会太复杂

---

我还注意到d3地理投影允许一个精度参数（比如），也许你忽略了这样的东西？在任何情况下，使用simplify.js简化坐标通常都是可能的。

感谢您提供的信息，我将研究d3.geo中的精度参数。无论如何，请注意，我需要的不是简化实际多边形，因为已经使用

topojson

实用程序（此处的所有信息：）对其进行了排序。我的意图只是为了DOM的冗长而减少十进制数字。因此，需要控制

路径

函数的输出。@ÓscarGómezAlcañiz嗯，理想情况下，有一些算法也会减少点数，而不会丢失太多细节。如果您只需要截断，那么您的解决方案已经很好了，唯一可以让它更好的是d3.geo是否允许降低输出的精度。在我的例子中，我选择了一个虚拟SVG宽度（viewBox），它足够大，可以显示我需要的所有细节，然后我完全删除了小数：

const path\u trunc=d=>path（d）。替换（/\.\d+/g，”）

但我也想知道geo.path是否在某处隐藏了此功能。