简化D3js的SVG路径生成的字符串

Question

我正在尝试使用惊人的D3js geo模块优化一点我生成的SVG.

我用作SVG路径d3.geo.path的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并使调试这些路径变得缓慢(还有很多,因为它是一个世界地图,吸引了很多国家).

所以我的第一个方法是创建这个pathSimplified包装器path:

// 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...

我的问题是:它能以更好,更少的hackish方式完成吗？在D3js的path函数吐出之后调整字符串是不正确的,并且在路径本身或投影的某个点指定舍入将是很好的...

Answer 1

你的想法很好，简化折线有帮助，但是你当然可以比仅仅截断坐标做得更好：存在折线简化算法，并且可能会给你更好的结果。

例如，看一下Ramer-Douglas-Peucker 算法。它在Simplify.js等库中实现（查看该页面上的演示），这也允许您进行容差调整。您必须将线作为 x/y 坐标数组传递，但我相信这并不太复杂。

我还注意到 d3 地理投影允许使用精度参数（如此处），也许您忽略了类似的东西？无论如何，使用 simple.js 自行简化坐标通常总是可行的。