D3js-Topojson：如何从像素化曲线转向Bézier曲线？

Question

D3js topojson visalization默认使用量化和点之间的直线导致不优雅的线条。通过示例查看以下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地图使用Bézier曲线？

注意：当viz显示非触摸多边形时，它应该是好的。也许会妨碍adaptive sampling。我已经尝试了line simplification，但它反效果，因为它简化了多边形周围相同速度的点数，而不考虑线的复杂性。以相同速度简化的摇晃和直线导致噩梦。

Answer 1

圣地亚哥的评论是正确的。您需要利用d3.svg.line从geoJSON功能的坐标生成路径，此时您可以使用D3的插值方法。请记住，这将涉及挖掘坐标数组（或MultiPolygon情况下的数组）并手动将GeoJSON坐标列表转换为SVG坐标列表，并使用d3.geo将每个坐标对从地理坐标转换为XY坐标。预测，这将是一项昂贵的努力。

请记住，如果沿着那条路走下去，GeoJSON要求多边形最后用最后出现的起始坐标关闭，这在SVG中并非如此，其中存在'Z'绘图指令这样做（和一些插补器这样做）所以你可能想要拼接第一个或最后一个坐标对。

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

那里更简单：minimal stand alone case study for line smoothing