D3js-Topojson: как перейти от пиксельных кривых к кривым Безье?


D3js topojson visalization по умолчанию использует квантификацию и прямые линии между точками, приводящие к неэлегантным линиям. Смотрите в качестве примера следующуютопографическую карту Франции и ее увеличенную версию.

Введите описание изображения здесьВведите описание изображения здесь

Код, который я использую:

//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 карту использования кривых Безье ?

Введите описание изображения здесь

Примечание: Когда viz отображает нетронутые полигоны, это должно быть хорошо. Может быть, идет по пути адаптивная выборка также. Я уже пытался упростить линию, но это контрпродуктивно, так как упрощает количество точек с одинаковой скоростью по всему полигону, независимо от сложности линии. Зыбкие и прямые линии, упрощенные с одинаковой скоростью, приводят к кошмарам.

1 3

1 ответ:

Комментарий Сантьяго верен. Вам нужно будет использовать D3.формат SVG.линия для создания путей из координат объекта geoJSON, в которой вы сможете использовать методы интерполяции D3. Имейте в виду, что это будет включать копание в массив координат (или массивы в случае Мультиполигона) и преобразование списков координат GeoJSON в списки координат SVG вручную, а также преобразование каждой пары координат из географических координат в координаты XY с помощью d3.Гео.проекция, и это было бы дорогостоящим предприятием.

Помните, что если вы идете по этому маршруту, то GeoJSON требует, чтобы полигон был закрыт в конце по начальной координате, которая появляется в конце, чего нет в SVG, где наличие инструкции рисования " Z " делает это (и некоторые интерполяторы делают это), поэтому вы можете захотеть соединить первую или последнюю пару координат.

Здесь есть демо-версия: http://bl.ocks.org/emeeks/d994dbdc9a7b21ab9692

И более простой там: минимальное отдельное исследование для сглаживания линий