如何从 D3 svg 转换为 topojson/geojson?

2024-01-09

D3 允许转换点坐标的 geojson/topojson 数组

[ [x,y],[x,y],[x,y],...]    // aka, a geojson arc.

并且,通过投影,进入 svg 路径

<path d="M x,y x,y x,y ..."></path>  // aka, an svg-xml path

注意:这些值实际上会发生变化。 Topojson点[x,y],通过变换projection([x,y])为 svg 路径设置新值。

所以,如果我们存储在 svg 中:

  1. 投影名称

  2. 点相对于 svg 原点 0,0 的绝对坐标(已存储在路径中)。

  3. Use projection.invert()

我们可以将 xml svg 转换回 topojson/shp,包括手工添加的形状和图层。

到目前为止,我不知道有任何开源工具这样做。

问题变成:我应该在 svg 中存储哪些最低要求,以便它能够保留转换回 GIS 格式的潜力?(我可能遗漏了一些点)


Edit:虽然意识到这一点,但处理的复杂性Point, LineString, Polygon, MultiPoints, MultiLineStrings, MultiPolygons不是现在的问题。只需满足最低要求,即可实现向后转换。

Edit2:转换回 geojson 可能会更容易,因为 svg 和 geojson 数据结构更相似。


None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何从 D3 svg 转换为 topojson/geojson? 的相关文章

  • D3 数据对象内的循环数组

    data name c1 id 4690 day 1 3 start 8 00 end 10 00 name c3 id 5283 day 3 4 start 8 00 end 17 00 name c4 id 4862 day 4 sta
  • D3.js - 如何迭代数据集中的子数组

    我试图让 d3 迭代数据中的子数组并生成多个饼图 这是完整的代码 来自https gist github com mbostock 1305111 https gist github com mbostock 1305111 and htt
  • Snap.svg 如何获取我们拖动的元素

    我正在使用 Snap svg 库并进行一些拖放操作 我的问题是如何获取我拖动的元素的 id 我正在尝试实现拖放 并且只有选定的区域才是有效的放置目标 我不知道如何检查拖拽下方的元素是什么 这是来自文档 Element drag onmove
  • 数据与线的日期和时间转换

    我使用 D3 V5 创建了此图表 另外 我已在小提琴上附加了示例数据 您可以点击此处查看 https plnkr co edit pINxcS9yt9AuJmSk02Fs p preview 我已经包括了tick函数代码块 它在向左滑动的路
  • 使用 CSV 文件填充下拉列表 - d3

    我想在 html 中填充简单的下拉列表 使用 csv 文件中存在的值 我尝试类似的方法 但它不起作用
  • d3.js 和 Chart.js 之间的比较(仅适用于图表)[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我在项目中多次使用过 Chart js 但从未使用过 d3 js 很多人说 d3 js 是最好的图表 javascript 框架 但没
  • 辅助功能:推荐 SVG 和 MathML 的替代文本约定?

    Overview HTML5 现在允许 http dev w3 org html5 markup syntax html svg mathml
  • 通过 Fabric.js 推送 D3.js 输出以支持 IE8?

    我正在评估Fabric js http fabricjs com 作为替代拉斐尔 js http raphaeljs com 用于创建与 IE8 兼容的交互式可视化 IE8 不支持 SVG 或画布 不幸的是 IE8 支持是不可协商的 Rap
  • 寻找一种重构 D3.js 风格的方法链接模式的方法

    在学习 D3 js 时 我遇到了博客文章 http bost ocks org mike chart 解释其可重用代码单元背后的主要设计模式 我复制了下面的相关代码 下面呈现的模式的方式正是在 D3 代码库和插件中使用的方式 example
  • 哪个 SVG/SMIL DOM 元素具有“beginElement”方法?

    最终 这是针对将在 Firefox 中运行的 Kiosk 风格的应用程序 使用 jQuery 1 6 4 因此答案可能是特定于 Firefox 的 我正在尝试制作动画 SVG 但我正在尝试通过动态插入 SMIL 来为其设置动画 我没有看到任
  • 将外部 SVG 加载到 DOM 中,当前文档而不是子文档

    我正在尝试将外部 SVG 文档加载到一个简单的网页中 以便我可以将其用作基本的氯罗佩斯地图 然而 使用HTML 中的结果是 SVG 作为子文档加载 基本上我无法使用 jquery 按 ID 查询 SVG 路径 例如 NY css fill
  • 如何在D3中导入json数据?

    如何在D3中导入json文件 I did d3 json temp json 但是我如何在进一步的代码中访问这个数据集呢 到目前为止我已经尝试过 var data d3 json temp json 但使用 data data 在其余代码中
  • D3:使用 d3-tile 缩放到边界框

    我已成功将 D3 矢量 地图分层到从 Mapbox 提取图块的 d3 tile 光栅 地图之上 手动缩放效果非常好 矢量和光栅都是同步的 我现在正在尝试实施迈克 博斯托克 缩放到边界框 https bl ocks org mbostock
  • 我可以补间 D3 弧的结束角度,但不能补间起始角度。我究竟做错了什么?

    我只是在玩这个演示并自己重新创建它 http bl ocks org mbostock 5100636 http bl ocks org mbostock 5100636 我可以定义一个新的 endAngle 并且它会很好地制作动画 但现在
  • 从左到右显示 SVG 动画

    我有两个 SVG 图像 我想将它们设置为动画 如下所示 首先显示Full Screen文本从左到右 然后用第二个 SVG 覆盖该单词Screen显示整个第二个 SVG 因此 最后我将得到第二个 svg 中的单词 Full 黑色空间 以及单词
  • 具有水平和垂直组合布局的可折叠树

    我正在尝试在 D3 中创建一个可折叠树 它结合了水平 第一级和第二级 和垂直 3 级 布局 这里有一个jsfiddle http jsfiddle net artemkolotilkin z7tb23Lo 到目前为止我所得到的 除了一件事之
  • SVG 视图框显示屏幕外项目

    我正在使用 HTML5 制作游戏svg标签为图形提供多分辨率显示 游戏的大部分内容已经完成 但在测试中我刚刚遇到了一个主要错误 其中涉及 SVG 对象可见 尽管在非本机分辨率下位于视图框之外 我不确定这是否是我的代码或浏览器本身的缺陷 Go
  • 使用 html2canvas 将 highcharts 图表渲染为 pdf 在 IE 和 Firefox 上不起作用

    我们使用 html2canvas js 和 html2canvas svg js 版本 0 5 0 beta1 以及 highcharts js 将圆环图下载为 pdf 这在 Chrome 中按预期工作 但在 IE 和 Firefox 中不
  • D3.js 中的点图

    我有兴趣创建一个Dot plot 每个数据值都有连续的点 但到目前为止我所管理的是为每个值创建一个点 更清楚地说 假设对于 array1 我希望第一个值创建 5 个圆圈 第二个值创建 4 个圆圈 依此类推 array1 5 4 2 0 3
  • IPython Notebook Markdown——允许的 HTML 标签列表是什么以及如何更改它们?

    我正在使用 IPython Notebook markdown 创建一个文档 它确实允许一些 HTML 例如 img 例如但我添加了包含 SVG 文件 但它不会显示在 IPython Notebook 输出中 我仔细检查了 IPython

随机推荐