D3js-Topojson：如何从像素化到贝塞尔曲线？ [英] D3js-Topojson : how to move from pixelized to Bézier curves?

问题描述

D3js topojson视觉化缺省使用量化和点之间的直线导致不真实的线。请参阅示例以下的方式。我已经尝试过行简化，但它的反效果，因为它简化了点的数量相等速度围绕多边形，而不考虑线的复杂性。以相同速度简化的直线和直线导致恶梦。

解决方案

Santiago的意见是对的。您需要利用d3.svg.line从geoJSON功能的坐标生成路径，此时您可以使用D3的内插方法。记住，这将涉及挖入坐标数组（或在MultiPolygon的情况下的数组），并将GeoJSON坐标列表手动转换为SVG坐标列表，并使用d3.geo将每个坐标对从地理坐标转换为XY坐标。

请记住，如果你沿着GeoJSON要求多边形在结束时由开始坐标显示的路线关闭在SVG中不是这样，其中Z绘图指令的存在这样做（并且一些插值器这样做），因此您可能想要拼接第一或最后一个坐标对。

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

还有一个更简单的：线条平滑的最小独立案例研究

D3js topojson visalization by default use quantification and straight lines between points resulting in unelegant lines. See by example the following France Topography map and it's zoomed version.

The code I use is :

//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);

How do make my topojson map use Bézier curves ?

Note: When the viz display non-touching polygons, it's should be good. Maybe goes into the way of adaptive sampling as well. I already tried line simplification but it's counter productive, as it simplifies the number of dots at equal speed all around the polygon, without regard to the line's complexity. Shaky and straight lines simplified at same speed result in nightmares.

解决方案

Santiago's comment is right. You would need to leverage d3.svg.line to generate paths from the coordinates of your geoJSON feature, at which point you would be able to use D3's interpolate methods. Keep in mind that this would involve digging into the coordinates array (or arrays in the case of a MultiPolygon) and converting GeoJSON coordinate lists to SVG coordinate lists by hand, and converting each coordinate pair from geographic coordinates to XY coordinates using d3.geo.projection, and so would be an expensive endeavor.

Remember, if you go down that route that GeoJSON requires that a polygon be closed at the end by the beginning coordinate showing up at the end, which is not the case in SVG, where the presence of the 'Z' drawing instruction does so (and some interpolators do so) so you might want to splice the first or last coordinate pair.

There is a demo here: http://bl.ocks.org/emeeks/d994dbdc9a7b21ab9692

And a simplier one there: minimal stand alone case study for line smoothing

这篇关于D3js-Topojson：如何从像素化到贝塞尔曲线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！