在 D3.js 中导入并解析 SVG 文件

2023-12-31

我在其他地方(使用 MS Visio)创建了 SVG 文件,我想将其用作可视化的背景,其中一些定位是由 SVG 图形中项目的放置驱动的。理想情况下,我能够直接操作导入的 SVG 数据,然后使用它通过 D3 在调用文档中创建元素。

是否有一种简单的方法可以使用 D3 将现有 SVG 文档导入到数据结构中,类似于导入 JSON 的方式?我尝试过 d3.xml,但似乎没有获得有用的数据结构。据我所知,使用 IMG 标签导入图形不会使用 SVG 元素填充 DOM。

一个小问题是:它必须也能在 IE9 中运行! (导入节点不起作用)


感谢您的想法。我最终知道该怎么做。可以使用 d3.xml 调用导入 SVG 文件。解析完成了,但复杂的是如何理解生成的 DOM 结构。 IE9 似乎在放置导入的节点时存在问题,但我不需要这种行为,因为我只想使用传入 SVG 的各个方面,并且将使用 D3 重新生成 SVG

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

在 D3.js 中导入并解析 SVG 文件 的相关文章

  • 数据与线的日期和时间转换

    我使用 D3 V5 创建了此图表 另外 我已在小提琴上附加了示例数据 您可以点击此处查看 https plnkr co edit pINxcS9yt9AuJmSk02Fs p preview 我已经包括了tick函数代码块 它在向左滑动的路
  • 寻找一种重构 D3.js 风格的方法链接模式的方法

    在学习 D3 js 时 我遇到了博客文章 http bost ocks org mike chart 解释其可重用代码单元背后的主要设计模式 我复制了下面的相关代码 下面呈现的模式的方式正是在 D3 代码库和插件中使用的方式 example
  • Webpack 不包括 ProvidePlugins

    我正在开发一个小型试用 Web 应用程序 它使用 vue webpack 模板 https github com vuejs templates webpack https github com vuejs templates webpac
  • d3.js V4 按钮缩放实现表现得很奇怪

    我正在尝试实现 d3 平移和缩放功能 默认的平移和缩放工作正常 但要求是我们还需要放大和缩小按钮 我还实现了缩放按钮 它也有效 奇怪的是 当我第一次移动图像并单击缩放按钮时 图像会移回到以前的位置 不仅是当我第一次用鼠标缩放并使用按钮再次开
  • D3:使用 d3-tile 缩放到边界框

    我已成功将 D3 矢量 地图分层到从 Mapbox 提取图块的 d3 tile 光栅 地图之上 手动缩放效果非常好 矢量和光栅都是同步的 我现在正在尝试实施迈克 博斯托克 缩放到边界框 https bl ocks org mbostock
  • 如何在 d3.scale.ordinal() 中指定域?

    var W 100 var H 200 var data v 4 v 8 v 15 v 16 v 23 v 42 var x d3 scale linear domain 0 max x range 0 W var y d3 scale o
  • d3 地理投影从正交到 X 的过渡

    我正在开发一个教育地图项目 其中显示不同的地图投影 我想在选择不同投影之间实现变形过渡 我找到了一个很好的例子来实现它 并且我没有遇到太多的麻烦来重新创建它 不幸的是 我还需要裁剪投影的功能 这与目标状态完美配合 但在改变投影时则不然 当选
  • 使用 D3.js 解析时间序列数据

    是时候寻求帮助了 我已经学习 D3 js 几个星期了 我才开始觉得我理解了其中的 10 哈哈哈 我正在尝试生成一个非常简单的线图 只要数据非常简单 我就可以做到这一点 但我的原始数据源具有 UTC 时间戳和实数 小数 这会导致任何超出简单范
  • 在 d3v4 堆积条形图中使用 JSON

    我找到了一个d3v3堆积条形图示例 http bl ocks org mstanaland 6100713我想使用它 因为它使用 json 数据 还有一个d3v4规范条形图示例 https bl ocks org mbostock 3886
  • 如何使用 D3 (或只是 javascript)将表单选项设置为“选择”

    有没有一种方法可以搜索选择表单元素中的所有选项 并将具有匹配值的选项指定为 已选择 var xStat G var statOptions Points PTS Goals G Assists A Penalty Minutes PIM c
  • D3 向对象添加超链接?

    我正在尝试制作 D3 图 它将代表我网站的菜单 我尝试按照此处的其他指南添加超链接 但它们都不起作用 每个对象都会有一个不同的 URL 指向 主页 关于 联系方式等 如果添加超链接 我可以拖动对象吗 这意味着如果我按住单击 如果我单击该对象
  • GeoJson 世界数据库 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在开发一个项目 需要使用 d3 js 显示国家和城市的地图 实际上 D3支持GeoJson格式 通常
  • d3.js 堆叠条形图 - 修改堆叠顺序逻辑

    我想创建一个堆积条形图 其中矩形的顺序由数据值确定 即最大到最小 最高到最短 最富有到最贫穷等 据我所知 在堆叠数据后 initial秩序似乎得到保留 这可以在我的代码片段中看到 硬编码数据让我们可以看到之前和之后发生的情况d3 stack
  • DC.js 中的工具提示(D3 库)

    DC js 具有强大的内置功能 可显示每个工具提示文档 https github com dc js dc js blob master web docs api latest md title titleFunction 功能 无论如何
  • D3 将现有 SVG 字符串(或元素)追加(插入)到 DIV

    我到处寻找这个问题的答案 并找到了一些我认为可能有用的资源 但最终没有让我找到答案 这里有一些 外部SVG http bl ocks org mbostock 1014829 嵌入SVG https stackoverflow com qu
  • d3.js:修改树布局中的链接

    抱歉我的英语不好 我在这里使用这个例子 http bl ocks org mbostock 4339083 http bl ocks org mbostock 4339083构建树形图 但我用矩形更改了根的子级中的圆圈 现在该图有点混乱 因
  • 增加 D3 图中边缘的可点击区域

    我有一个由 d3 制作的图 dagre d3 位于其顶部用于绘制有向图 这给出了我对渲染图表的期望 要编辑构建图表的数据 每个元素都是可单击的 这对于使用标签渲染边缘的情况来说很好 但它们并不总是有标签 导致未标记的边缘很难单击进行编辑 分
  • 如何避免多系列折线图d3.js的工具提示重叠

    我已经在多系列折线图上创建了工具提示 如下所示在这里回答 https stackoverflow com questions 34886070 d3 js multiseries line chart with mouseover tool
  • 如何在“object”标签内选择 SVG?

    HTML 页面的内容如下所示 方法如下script js looks var tooltip d3 select body append div style position absolute sty
  • 使用 d3-geo-projection 命令行工具设置自定义投影

    我正在尝试使用 geoproject 在 geojson 文件上设置投影 具体来说 我正在尝试将投影设置为 BCalbers http spatialreference org ref epsg 3005 http spatialrefer

随机推荐

  • 如何使用canvas和javascript创建运动模糊效果?

    我有一个带有绘制图标的虚拟画布 该图标是动态的 因此我无法在 Photoshop 中制作该图标的运动模糊变体 我通过以下代码在场景中渲染此图标 function render context context drawImage this b
  • SwiftUI 暂停/恢复旋转动画

    到目前为止 我已经看到了以下用于停止动画的技术 但我在这里寻找的是旋转视图停止在当前的角度 而不是返回到 0 struct DemoView View State private var isRotating Bool false var
  • 如果父窗口关闭了,如何关闭子窗口?

    我有一个弹出另一个窗口的网络应用程序 如果该人关闭主浏览器窗口 我也需要关闭子窗口 这可能吗 如果是这样 怎么办 当您调用 window open 时 返回值是所创建的新窗口的句柄 使用此功能 您可以保留已打开的窗口数组 然后在卸载事件处理
  • swift 中的 HTTP 请求不起作用

    我正在尝试了解如何在 Swift 中使用 API 作为一个很好的第一次测试 我想我应该使用 itunes API 并只返回一些搜索结果 我在操场上使用以下代码 我没有收到任何错误 但我的 println 没有输出任何内容 有谁知道出了什么问
  • 插入字符串 c# 6.0 和 Stylecop

    我正在使用 Stylecop 版本 4 7 49 0 有没有人使用过 c 6 0 中最新的插值字符串功能 example var totalUnits GetUnitsGetTotalIssuedShares myId var testSt
  • 如何使用 Borland 数据库引擎和 Delphi 应用程序解决“无法在封闭数据集上执行此操作”? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 该应用程序运行完美 直到我在 Ope
  • Swift 3:tableView 复制从 Firebase 加载的图像

    我正在尝试显示带有图像的用户列表 这是代码 override func tableView tableView UITableView cellForRowAt indexPath IndexPath gt UITableViewCell
  • 从csv中获取关联数组

    我从 url 打开一个 csv 文件 每行有 4 个字段 每个字段都有一个名称 Field1 Field2 Field3 Field4 现在我的脚本将 csv 数据作为一行处理 但我想这样处理 Array 0 gt array field1
  • 詹金斯后期构建步骤和操作 - 有什么区别

    听起来可能是一个非常基本的问题 但我找不到任何文章可以解释为什么 Jenkins 提供构建后步骤和操作 在詹金斯 我确实看到构建后步骤与操作中的选项是不同的 但是 执行顺序是什么 我们什么时候应该使用哪个选项 最佳实践是什么 乍一看 这是
  • 了解网格列属性

    我最近回答了一个关于 CSS 网格的问题 但在我的回答中 我使用了一种有效的风格 但与我认为的标准方式相反 看看下面的代码片段 红细胞具有以下样式 grid column 3 4 grid width 200px display grid
  • 有没有办法在 Firefox 中将 HTML5 Gamepad API 与多个窗口或选项卡一起使用?

    我正在设计一个应用程序 该应用程序使用 HTML5 游戏手柄 API 来利用游戏手柄的输入 我的应用程序可以在 Firefox 和 Chrome 中运行 但是 Firefox 似乎不允许在前一个选项卡访问游戏手柄后第二个窗口或选项卡访问游戏
  • 有效获取elasticsearch索引中的所有文档

    我想从 Elasticsearch 集群中的所有匹配查询中获取所有结果 我不关心结果是否是最新的 也不关心顺序 我只想稳步地继续检查所有结果 然后从头开始 滚动和扫描最适合这种情况吗 拍摄我不需要的快照似乎有点麻烦 我将考虑处理数千万个文档
  • 在 GWT 中使用参数发出 POST 请求

    我正在尝试使用一组参数对给定 URL 执行 POST 请求 我遇到的问题是发出了 POST 请求 但没有传递任何参数 RequestBuilder builder new RequestBuilder RequestBuilder POST
  • 使用 d3.js 的多个地图:更改比例和中心的值

    我正在构建一个 d3 v4 地图可视化它允许用户在许多数据集 json 文件 之间切换两个不同的地区 一个国家的行政单位和较小的行政单位进入其首都 实际上 通过按钮和 jquery 在初始国家级别上从一个数据集到另一个数据集的切换效果很好
  • VBA 捕获“计算工作表 (shift+f9)”和“计算工作簿”事件

    我不知道这是否是微不足道的或实际上很棘手 是否有可能捕获 VBA 中的 计算工作表 shift f9 和 计算工作簿 事件 我想隐藏一些操作几千行的进程 只显示一些关键值 我正在计算分布 数千行 并且只想输出百分位数和一些统计数据 以及图表
  • jquery-ui datepicker 多语言集成

    我正在尝试将不同的 jquery ui datepicker 选项组合到一个函数中 我可以让大部分脚本脱离语言而工作 我拥有所有 i18n 文件 并且我正在使用 select 元素来更改值 但似乎没有任何效果 我做错了什么
  • API 请求错误 - 请求的资源上不存在“Access-Control-Allow-Origin”标头

    我尝试获取 API 请求 但返回此错误 Access to XMLHttpRequest at https api deezer com chart from origin http localhost 3000 已被 CORS 策略阻止
  • 文件夹目录中的子文件夹数量

    我有一个包含两个数据文件的文件夹 txt等 和子文件夹 在Java中 如何获取任何指定目录路径中的子文件夹数量 因此排除数据文件 仅计算子文件夹 我读过有关计算数量的内容 txt文件 但似乎找不到任何有关仅计算子文件夹的信息 我不知道从哪里
  • 为什么 Net::FTP 无法连接到服务器?

    我正在尝试创建一个脚本来使用 Ruby 列出并从 FTP 服务器下载数据 我是 Ruby 新手 所以我寻找了如何使用 Net FTP 的文档 我无法理解为什么这不起作用 require net ftp server ftp server c
  • 在 D3.js 中导入并解析 SVG 文件

    我在其他地方 使用 MS Visio 创建了 SVG 文件 我想将其用作可视化的背景 其中一些定位是由 SVG 图形中项目的放置驱动的 理想情况下 我能够直接操作导入的 SVG 数据 然后使用它通过 D3 在调用文档中创建元素 是否有一种简