Plot GeoJSON строка строки на холсте с использованием проекции D3

Question

Я пытаюсь построить строку строки на глобусе, созданном с помощью D3, но почему-то это проявляется неправильно.

Demo

Вот как проекция и пути устанавливаются

var projection = d3.geo.orthographic() 
    .translate([width/2, height/2]) 
    .scale(scale) 
    .clipAngle(90); 

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

Тогда я просто нарисовать его на холсте (с помощью функции пути)

// the route 
    context.fillStyle = '#000'; 
    context.strokeStyle = '#000'; 
    context.beginPath(); 
    path(route); 
    context.fill(); 

route переменная - строка строки GeoJSONn, я могу построить маршрут на карте буклета и все, что угодно ks, как ожидалось, однако, когда я пытаюсь нарисовать его на земном шаре, он просто проявляется неправильно.

Я думаю, что это как-то связано с проекциями, но я не делаю этого. Кто-нибудь знает, как я могу это исправить?

Answer 1

Вместо заполнения ваш путь нарисован на холсте, вам нужно просто гладить его:

// the route 
    context.fillStyle = '#000'; 
    context.strokeStyle = '#000'; 
    context.beginPath(); 
    path(route); 
    context.stroke(); // Just stroke the path 
    //context.fill(); // You don't want to fill the path 

Это будет только нарисовать линию, как и ожидалось. Посмотрите на эту работу Plunk.

Answer 2

С другой стороны, если вам нужно указать заполнить, просто установить его на цвет фона (вот что #ccc)

// the route 
context.fillStyle = '#ccc'; 
context.strokeStyle = '#000'; 
context.beginPath(); 
path(route); 
context.fill(); 
context.stroke();