2016-07-20 3 views
-1

Я разрабатываю карту d3.js. Я нарисовал точки в нескольких странах, и я связал эти точки с дугами. Проблема в том, что некоторые дуги прерываются.строки линии d3.js прерваны

Interrupted arcs on map

gArcs.append("path") 
 
    .datum({ 
 
    type: "LineString", 
 
    coordinates:[ 
 
     [data.dataArray[i].long_from, data.dataArray[i].lat_from], 
 
     [data.dataArray[i].long_to, data.dataArray[i].lat_to] 
 
    ] 
 
    }) 
 
    .attr("class", "arc") 
 
    .attr("d", path) 
 
    .style({ 
 
    'stroke': lineColor, 
 
    'stroke-width':lineWidth, 
 
    })

Любые идеи о том, как рисовать дуги без получения прервана?

+0

Я не вижу прерывистых дуг. Одна дуга изображена [большой круг] (https://en.wikipedia.org/wiki/Great_circle), соединяющий Канзас-Сити и Алис-Спрингс, проецируемые на вашу карту. Он просто обрезается по широте вашего выбора. Итак, каков ваш вопрос? – altocumulus

+0

Привет высококучевые, я просто не хотел бы использовать кратчайший путь и иметь непрерывную дугу на моей карте, по Африке для той, что в моем примере. thx – JeanMichLCarton

+0

Посмотрите http://grokbase.com/t/gg/d3-js/138wqyv0ac/straight-lines-on-map-in-d3-js и [* "Прямые линии на карте в d3.js" *] (/ q/18493505) – altocumulus

ответ

0

Наконец, я выбрал решение для рисования прямых линий с проецируемыми точками на моих картах, чтобы избежать прерывистых дуг.

features.selectAll("path") 
    .data(data.dataArray) 
    .enter().append("line") 
    .filter(function(d) { 
    return d.country_name_from == countryNameFrom 
    }) 
    .attr("x1", function (d) { 
    return projection([d.long_from,d.lat_from])[0]; 
    }) 
    .attr("y1", function (d) { 
    return projection([d.long_from,d.lat_from])[1]; 
    }) 
    .attr("x2", function (d) { 
    return projection([d.long_to,d.lat_to])[0]; 
    }) 
    .attr("y2", function (d) { 
    return projection([d.long_to,d.lat_to])[1]; 
    }) 
    .attr("d", path) 
    .style({ 
    'stroke': lineColor, 
    'stroke-width':lineWidth, 
    }) 
Смежные вопросы