d3.js: почему d3.geo.path() дает NaN?

Я пытаюсь сделать некоторые онлайн-сопоставления с d3, но сталкиваюсь с проблемой, когда пытаюсь провести линию между двумя точками.

Я рассчитал центроид двух полигонов (источник и цель)

В коде:

var projection = d3.geo.mercator()
    .scale(width)
    .translate([0, 0]);

var path = d3.geo.path()
    .projection(projection);

Из консоли JS:

> path({type: "LineString",
      coordinates: [path.centroid(source_country), path.centroid(target_country)]});

"M277.05056877663407,121.67976219138909L-694.1792414247936,NaN"

Тем не менее, расчеты центроида, кажется, работают нормально (нанесение этих точек показывает их на карте)

> [path.centroid(source_country), path.centroid(target_country)]

[
Array[2]
0: 103.89396329123777
1: -41.453727169465765
length: 2
__proto__: Array[0]
, 
Array[2]
0: -260.3172155342976
1: -245.57309459883245
length: 2
__proto__: Array[0]

Любые идеи, почему этот NaN появляется в конце пути, созданного для моей LineString?

2 ответа

Решение

The problem here is that you're projecting the lat/lon coordinates twice. path() operator expects to take lat/lon and project to pixels; path.centroid() method also expects a lat/lon geometry, and also produces a pixel-based projection.

Поэтому, когда вы звоните path на [path.centroid(...), path.centroid(...)], you're trying to project already-projected coordinates. You get at NaN because the y-position of the pixel coordinates, -245, is out of bounds for a longitude value.

Самый простой способ исправить это, вероятно, использовать d3.svg.line to create the centroid-centroid path. Я не проверял это, но я думаю, что это будет выглядеть так:

var line = d3.svg.line();
line([path.centroid(source_country), path.centroid(target_country)]);

Хорошо, только сейчас я встретил ту же ошибку,

для всех, кто сталкивается с проблемой NAN:

  1. формат координат должен быть правильным. например, для типа Polygon, координата должна иметь трехуровневый вложенный массив. например [[[1,2],[2,3]]]

  2. координаты должны быть с плавающей запятой / целым числом, но не строковыми (например, 1 верный, "1" ошибка )

  3. вы можете просмотреть подробное содержание результата ошибки, например M...L...Z... и узнайте, где ошибка.

Другие вопросы по тегам