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

问题

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.

回答1:

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

来源：https://stackoverflow.com/questions/25514522/d3js-topojson-how-to-move-from-pixelized-to-b%c3%a9zier-curves

标签

d3.js

topojson