d3.js - D3js-Topojson : how to move from pixelized to Bézier curves?

Question

默认情况下，D3js topojson 可视化使用量化和点之间的直线导致不雅的线条。通过示例查看以下 France Topography map并且是放大版。

我使用的代码是:

//Append Topo polygons
    svg.append("path")
        .datum(topojson.object(json, json.objects.levels) )
        .attr("d", path)
    svg.selectAll(".levels")
        .data( topojson.object(json, json.objects.levels).geometries)
      .enter().append("path")
        .attr("class", function(d) { return "Topo_" + d.properties.name; })
        .attr("data-elev", function(d) { return d.properties.name; })
        .attr("d", path);

如何使我的 topojson map 使用贝塞尔曲线？

注意: 当可视化项显示非接触多边形时，应该没有问题。也许会影响 adaptive sampling以及。我已经试过了line simplification但它会适得其反，因为它以相同的速度简化了多边形周围的点数，而不考虑线条的复杂性。以同样的速度简化不稳定的直线会导致噩梦。

Answer 1

Santiago 的评论是正确的。您需要利用 d3.svg.line 从您的 geoJSON 功能的坐标生成路径，此时您将能够使用 D3 的插值方法。请记住，这将涉及挖掘坐标数组(或多边形情况下的数组)并手动将 GeoJSON 坐标列表转换为 SVG 坐标列表，并使用 d3.geo 将每个坐标对从地理坐标转换为 XY 坐标。投影，因此将是一项昂贵的工作。

请记住，如果您沿着这条路线走下去，GeoJSON 要求多边形在结束时由显示在末尾的开始坐标闭合，而在 SVG 中则不是这种情况，SVG 中存在“Z”绘图指令这样做(并且一些插值器这样做)所以您可能想要拼接第一个或最后一个坐标对。

这里有一个演示: http://bl.ocks.org/emeeks/d994dbdc9a7b21ab9692

还有一个更简单的:minimal stand alone case study for line smoothing