Как получить данные пути SVG функции Topo JSON, не добавляя их в DOM? - PullRequest
Новая
       69

Как получить данные пути SVG функции Topo JSON, не добавляя их в DOM?

2 голосов
/ 21 января 2020

У меня есть особый случай, для которого я не хочу добавлять свой сгенерированный путь к файлу топо json в DOM, а только получить сгенерированный атрибут d (путь SVG).

Поэтому я обычно делал что-то вроде этого: 

let features = feature(landmass, landmass.objects.land).features

        let projection = d3.geoAzimuthalEqualArea()
            .center([180, -180])
            .fitSize([width, height], { type: "FeatureCollection", features: features })

        let path = d3.geoPath().projection(projection)

        g.selectAll("#landmass")
            .data(features)
            .enter().append("path")
            .attr("id", "landmass")
            .attr("d", path);

Но на самом деле я просто хочу, чтобы features был переведен в путь, используя выбранный geoPath, без добавления какого-либо объекта svg в ДОМ.

Как мне этого добиться?

1 Ответ

3 голосов
/ 21 января 2020

Документы D3 по географическому признаку c генераторы пути покрыли ли вы (выделение мое):

Генератор пути географии c, d3.geoPath , аналогичен генераторам формы в d3-форме: с учетом геометрии или объекта Geo JSON, он генерирует строку данных SVG-пути или отображает путь в Canvas.

Вы можете передать объект Geo JSON в генератор пути и заставить его создать данные пути - то есть команды пути - которые затем назначаются свойству d свойства <path> элемент. Это в основном то, что происходит при кодировании 

.data(features)
// ... enter, append, etc...
.attr("d", path);

Это утверждение может быть переписано как: 

.data(features)
// ... enter, append, etc...
.attr("d", d => path(d));

или, еще более явно: 

.data(features)
// ... enter, append, etc...
.attr("d", feature => path(feature));

Глядя на В последнем фрагменте кода становится ясно, что D3 - с помощью средств привязки данных - создает элемент <path> для каждого объекта и передает этот объект, то есть данные, связывающие элемент <path>, с генератором пути path для создания d Строка команды свойства path.

Обладая этими знаниями, вы можете легко создавать строки данных пути для всех ваших функций, не создавая никаких узлов DOM: 

const pathData = features.map(feature => path(feature));

Более кратко, вы можете просто передать функцию генератора на .map(): 

const pathData = features.map(path);
...