D3.js D3js Topojson:如何从像素化移动到Bé;齐尔曲线?

D3.js D3js Topojson:如何从像素化移动到Bé;齐尔曲线?,d3.js,topojson,D3.js,Topojson,默认情况下,D3js拓扑可视化使用量化和点之间的直线,从而产生不公平的直线。通过示例查看以下内容及其缩放版本 我使用的代码是: //Append Topo polygons svg.append("path") .datum(topojson.object(json, json.objects.levels) ) .attr("d", path) svg.selectAll(".levels") .data( topojson.

默认情况下,D3js拓扑可视化使用量化和点之间的直线,从而产生不公平的直线。通过示例查看以下内容及其缩放版本

我使用的代码是:

//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);
如何使我的地形图使用贝塞尔曲线?


注意:当viz显示非接触多边形时,它应该是好的。也许这也会妨碍你。我已经试过了,但效果适得其反,因为它简化了多边形周围等速点的数量,而不考虑线条的复杂性。以同样的速度简化的摇晃的直线会导致噩梦。

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

请记住,如果您沿着这条路线走下去,GeoJSON要求多边形在末端以显示在末端的起始坐标闭合,这在SVG中不是这样的,在SVG中,存在“Z”绘图指令会这样做(一些插值器也会这样做),因此您可能希望拼接第一个或最后一个坐标对

这里有一个演示:


还有一个更简单的例子:

也许是这个。插值(“基础”)谢谢你的链接,因为我现在有了一个切入点
cardinal
似乎更适合我使用。该链接中引用的插值函数与使用地图投影时使用的函数是分开的(在投影需要时,它们自己进行计算以将直线转换为明显的曲线)。要使贴图函数使用曲线平滑机制,需要大量自定义代码,尤其是何时使用和何时不使用的自定义代码!平滑锯齿状海岸线似乎是个不错的主意,但你不想平滑国家边界的几何角。顺便说一句,真正的问题似乎是你的地图数据的分辨率比你的任务所需的分辨率低得多。你需要更详细的数据才能得到边界的完整形状。@AmeliaBR,我编辑了我的问题。我的法国dataviz是一个真实大小的屏幕截图,只要你缩放x2,你就会清楚地看到“楼梯”,一个链接就提供给你了。因为这样的地形是由非接触多边形构成的,所以进行曲线平滑可能很有趣。这种块非常强大。