Как получить проецируемые строки определения пути (а не элементы SVG) из набора данных GeoJSON с D3?

Существует множество примеров рисования SVG-маршрутов из геоданных D3 с использованием инструментов проектирования траектории D3. Например, here's one I wrote earlier (D3 v3) и вот recent example using D3 v4.Как получить проецируемые строки определения пути (а не элементы SVG) из набора данных GeoJSON с D3?

Все они выглядят примерно так:

svg.append("path") 
     .data(topojson.feature(datafile, datafile.objects.featureOfInterest)) 
     .attr("class", "land") 
     .attr("d", pathDefinitionObject);

... где файл данные считываются и связан с некоторой SVG, создавая связанные пустые пути, то объект определения пути D3, связанный с определенной проекцией выглядит на данных и использует его для добавления строк определения пути SVG к атрибутам d этих путей.

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

D3, очевидно, способен определять эти строки, но я не вижу очевидного способа получить объект определения пути для вывода строк без привязки к элементу SVG DOM.

Как я могу получить строки без SVG на странице?

Я пытаюсь использовать минимальный набор D3 v4's "microlibraries" для этого, так что бонусные баллы за ответ с наименьшим количеством зависимостей D3 (особенно, если он может избежать D3-selection.js, который является довольно большим - в идеале я Я бы хотел использовать только обработку данных D3 и вообще не использовать ее манипуляции с DOM для этого проекта).

источник

2016-07-27 user568458

Строительство от вашего связан v4 примера минимализма кода, чтобы просто получить земельные пути d атрибут будет:

<!DOCTYPE html> 
<meta charset="utf-8"> 

<script src="//d3js.org/d3-array.v1.min.js"></script> 
<script src="//d3js.org/d3-geo.v1.min.js"></script> 
<script src="//d3js.org/d3-request.v1.min.js"></script> 
<script src="//d3js.org/d3-dispatch.v1.min.js"></script> 
<script src="//d3js.org/d3-collection.v1.min.js"></script> 
<script src="//d3js.org/topojson.v1.min.js"></script> 

<script> 

var projection = d3.geoAlbers() 
    .scale(1280) 
    .translate([500, 500]); 

var path = d3.geoPath() 
    .projection(projection) 
    .pointRadius(1.5); 

d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json", function(error, us){ 
    if (error) throw error; 

    var topo = topojson.feature(us, us.objects.land); 
    console.log(path(topo)); 

}); 

</script>

Если вы не используете d3.json, вы можете оставить библиотеки d3-request, d3-dispatch и d3-collection.

источник

2016-07-27 13:31:31 Mark

Отлично! Не могу поверить, что все, что мне нужно было сделать, это передать объект geojson объекту пути! Это выводит одну мега-строку каждой функции в featureCollection, объединенную в одну строку 'M ... ZM ... ZM ... Z', но легко просто запустить цикл' for' вокруг 'topo.features' отделить их – user568458

Как получить проецируемые строки определения пути (а не элементы SVG) из набора данных GeoJSON с D3?

ответ

Смежные вопросы