r - 在 R 中解析 SVG 路径

Question

我正在尝试使用 this file 破解用于解析 SVG 路径的 R 工作流程。上this webpage 。我在定位生成的多边形时遇到了伪影:

一些国家不与邻国结盟 - 例如美国/加拿大、美国/墨西哥、俄罗斯/亚洲邻国。由于效果会影响具有更复杂多边形的国家/地区，因此似乎可能是累积求和的问题，但我不清楚问题出在我的工作流程中，即:

1. 将原始 SVG 解析为 XML，并提取所有 SVG 路径字符串
2. 使用 nodejs 的 svg-path-parser module 解析各个路径字符串
3. 将生成的 data.frames(结合绝对坐标和相对坐标)处理为所有绝对坐标

我使用 R(针对美国/加拿大)在此处重现了完整的工作流程，并对 Nodejs 进行了外部调用:

require(dplyr)
require(purrr)
require(stringr)
require(tidyr)
require(ggplot2)
require(rvest)
require(xml2)
require(jsonlite)

# Get and parse the SVG
doc = read_xml('https://visionscarto.net/public/fonds-de-cartes-en/visionscarto-bertin1953.svg')

countries = doc %>% html_nodes('.country')
names(countries) = html_attr(countries, 'id')
cdi = str_which(names(countries), 'CIV') # unicode in Cote d'Ivoire breaks the code
countries = countries[-cdi]

# Extract SVG paths and parse with node's svg-path-parser module.
# If you don't have node you can use this instead (note this step might be the problem):
# d = read_csv('https://gist.githubusercontent.com/geotheory/b7353a7a8a480209b31418c806cb1c9e/raw/6d3ba2a62f6e8667eef15e29a5893d9d795e8bb1/bertin_svg.csv')

d = imap_dfr(countries, ~{
  message(.y)
  svg_path = xml_find_all(.x, paste0("//*[@id='", .y, "']/d1:path")) %>% html_attr('d')
  node_call = paste0("node -e \"var parseSVG = require('svg-path-parser'); var d='", svg_path,
                     "'; console.log(JSON.stringify(parseSVG(d)));\"")
  system(node_call, intern = T) %>% fromJSON %>% mutate(country = .y)
}) %>% as_data_frame()


# some initial processing
d1 = d %>% filter(country %in% c('USA United States','CAN Canada')) %>%
  mutate(x = replace_na(x, 0), y = replace_na(y, 0), # NAs need replacing
         relative = replace_na(relative, FALSE),
         grp = (command == 'closepath') %>% cumsum)  # polygon grouping variable

# new object to loop through
d2 = d1 %>% mutate(x_adj = x, y_adj = y) %>% filter(command != 'closepath')

# loop through and change relative coords to absolute
for(i in 2:nrow(d2)){
  if(d2$relative[i]){ # cumulative sum where coords are relative
    d2$x_adj[i] = d2$x_adj[i-1] + d2$x_adj[i]
    d2$y_adj[i] = d2$y_adj[i-1] + d2$y_adj[i]
  } else{ # code M/L require no alteration
    if(d2$code[i] == 'V') d2$x_adj[i] = d2$x_adj[i-1] # absolute vertical transform inherits previous x
    if(d2$code[i] == 'H') d2$y_adj[i] = d2$y_adj[i-1] # absolute holrizontal transform etc
  }
}

# plot result
d2 %>% ggplot(aes(x_adj, -y_adj, group = paste(country, grp))) +
  geom_polygon(fill='white', col='black', size=.3) +
  coord_equal() + guides(fill=F)

感谢任何帮助。 SVG 路径语法在 w3 处指定。并总结得更简洁here .

<小时/>

编辑(回复@ccprog)

以下是从 svg-path-parser 返回的 H 命令序列的数据:

  code  command                 x      y relative country   
  <chr> <chr>               <dbl>  <dbl> <lgl>    <chr>     
1 l     lineto              -0.91  -0.6  TRUE     CAN Canada
2 l     lineto              -0.92  -0.59 TRUE     CAN Canada
3 H     horizontal lineto  189.    NA    NA       CAN Canada
4 l     lineto              -1.03   0.02 TRUE     CAN Canada
5 l     lineto              -0.74  -0.07 TRUE     CAN Canada

这是循环后相同序列的 d2 的样子:

  code  command                 x     y relative country      grp x_adj y_adj
  <chr> <chr>               <dbl> <dbl> <lgl>    <chr>      <int> <dbl> <dbl>
1 l     lineto              -0.91 -0.6  TRUE     CAN Canada    20  199.  143.
2 l     lineto              -0.92 -0.59 TRUE     CAN Canada    20  198.  143.
3 H     horizontal lineto  189.    0    FALSE    CAN Canada    20  189.  143.
4 l     lineto              -1.03  0.02 TRUE     CAN Canada    20  188.  143.
5 l     lineto              -0.74 -0.07 TRUE     CAN Canada    20  187.  143.

这看起来不太好吧？当我查看 H 和之前行的 y_adj 原始值时，它们是相同的 142.56。

<小时/>

编辑 2:工作解决方案，感谢@ccprog

d = imap_dfr(countries, ~{
  message(.y)
  svg_path = xml_find_all(.x, paste0("//*[@id='", .y, "']/d1:path")) %>% html_attr('d')
  node_call = paste0("node -e \"var parseSVG = require('svg-path-parser'); var d='", svg_path,
                     "'; console.log(JSON.stringify(parseSVG.makeAbsolute(parseSVG(d))));\"")
  system(node_call, intern = T) %>% fromJSON %>% mutate(country = .y)
}) %>% as_data_frame() %>% 
  mutate(grp = (command == 'moveto') %>% cumsum)

d %>% ggplot(aes(x, -y, group = grp, fill=country)) +
  geom_polygon(col='black', size=.3, alpha=.5) +
  coord_equal() + guides(fill=F)

Answer 1

看看您对加拿大的渲染，尤其是 hudson 湾的南部海岸。有一个非常明显的错误。筛选路径数据，发现原始数据中有如下序列:

h-2.28l-.91-.6-.92-.59H188.65l-1.03.02-.74-.07-.75-.07-.74-.07-.74-.06.88 1.09

我已将您的渲染结果加载到 Inkscape 中，并在顶部绘制了路径的相关部分，箭头标记了绝对 H 命令绘制的段。 (z命令已被删除，这就是丢失段的原因。)很明显，其中某个段太长了。

事实证明，绝对H纠正了之前的(水平)错误。看前面的一点:是198.,143.，但应该是191.76,146.07。垂直误差保持在-3.6左右。

我做了一个codepen尽可能精确地将原始路径数据与渲染重叠。路径数据已分为(单多边形)组并由 Inkscape 转换为绝对路径。不幸的是，程序无法将它们转换为多边形基元，因此其中仍然有 V 和 H 命令。

它显示了这一点:

• 路径的起点匹配。
• 绝对 H 命令描述的点具有匹配的水平值，但不具有垂直值。 (这是整个路径中唯一的绝对命令。)
• 每个路径组(多边形)本身似乎都是一致的，但除了 group0 之外，它们都已从其预期位置删除。

我对该偏差进行了一些视觉测量(误差~0.05)，它们最终给出了线索​​:

group01: 0.44,-0.73
group02: 0.84,-1.12
group03: 2.04,-1.44
group04: 2.94,-1.73
group05: 2.60,-1.86
group06: 3.14,-2.38
group07: 3.68,-2.54
group08: 4.03,-3.35
group09: 4.87,-2.97
group10: 6.08,-3.50 (begin)
group10: 0.00,-3.53 (end)
group11: 1.08,-1.95
group12: 2.05,-2.45
group13: 2.89,-2.84
group14: 3.64,-3.67
group15: 4.48,-3.44
group16: 4.04,-3.99
group17: 4.32,-3.08
group18: 4.75,-2.75
group19: 5.72,-2.95
group20: 5.40,-3.11
group21: 6.02,-2.95
group22: 6.63,-4.14
group23: 6.85,-5.00
group24: 7.14,-4.86
group25: 7.72,-4.39
group26: 8.65,-4.75
group27: 9.49,-4.39
group28: 10.20,-4.44
group29: 11.13,-4.58

您将删除 closepath 命令，然后计算相对于最后一组的最后一个显式点的下一组的第一个点。但 closepath 实际上移动了当前点:返回到最后一个 moveto 命令的位置。这些可以但不必相同。

我无法为您提供现成的 R 脚本，但您需要做的是:在新组的开头，缓存第一个点的位置。在下一组的开始处，计算相对于该缓存点的新的第一个点。