在 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.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • 使用 d3-geo-projection 命令行工具设置自定义投影

    我正在尝试使用 geoproject 在 geojson 文件上设置投影 具体来说 我正在尝试将投影设置为 BCalbers http spatialreference org ref epsg 3005 http spatialrefer
  • 为什么我的 D3 SVG 图上的轴不会更新?

    I have 简单的 D3 散点图 http www raxacoricofallapatorius com test scattertest html我在显示数据的几个不同属性之间切换 但是虽然我可以更改数据点 并按照我想要的方式进行转换
  • 如何运行 Mike Bostock 的 D3 示例?

    我一直在尝试经营迈克博斯托克透视地球仪 http bl ocks org mbostock 6747043例如 但是如果您尝试在本地重现它 则对其 json 文件的引用是不正确的 问题来自于这行代码 d3 json mbostock raw
  • D3 js 链接在节点下面

    我创建了图形对象 稍后可以使用更多节点和链接来扩展图形对象 第一个创作看起来不错 然后 与add函数我添加了节点 4 和链接 as you can see above the link of between node 4 and 3 is
  • d3.js 强制布局是否允许动态 linkDistance?

    我使用力布局来表示有向未加权网络 我的灵感来自以下例子 http bl ocks org mbostock 1153292 http bl ocks org mbostock 1153292 我的问题是 在我的情况下 节点之间有更多的链接
  • Javascript 将对象推送为克隆

    我将 d3 用于交互式网络应用程序 我需要绑定的数据在交互过程中发生变化 并且由 JSON 变量中的一些选定对象组成 为此 我在 JSON 变量上使用了映射 并进行了一些查询来选择适当的对象 对象被推送到列表中 并且该列表被绑定为新数据 我
  • 表格中与文本一起内嵌 D3 迷你图

    假设有一个这样的表 var data Orange Orange 6 3 3 2 5 Apple Red 6 2 6 5 5 Grape Purple 9 1 2 3 1 我希望将字符串表示为字符串 但将数字数组表示为 D3 折线图 如果这
  • d3 饼图中的文本被路径覆盖

    我正在尝试按照 d3 的饼图示例进行操作http bl ocks org mbostock 3887235 http bl ocks org mbostock 3887235 我的代码的最小示例 const container graph
  • 错误: 属性 d="MNaN,NaNA67.5,67.5 0 1,1 NaN,NaNL0,0Z" 的值无效

    我制作了一个饼图 当所有值都存在时 它工作正常 但是当所有值都设为 0 时 在控制台中我收到 600 多个错误 错误 属性translate translate NaN NaN 的值无效 错误 属性 d M4 133182947122317
  • LeafletJs只显示一个国家

    我使用 Leafletjs 和 D3 来显示地图 我只想在地图上显示英国 Leaflet和D3是否可以只显示英国 这当然是可能的 现在的解决方案取决于您是想使用 D3 绘制英国 还是想从 Tile Server 获取它 在后一种情况下 有一
  • 创建链接到 csv 文件的表

    我正在尝试创建一个链接到的表 csv使用 d3 文件 但我得到的只是一个空白网页 即使以克里米亚为例 我也得到一张空白页 我将很高兴得到指导或展示一个可行的例子或关于我做错了什么的建议 如果您询问如何从 CSV 数据创建 HTML 表 这就
  • 根据 D3 中的属性值对对象进行排序

    我有一系列在 D3 中使用的对象 例如 var cities city London country United Kingdom index 280 city Geneva country Switzerland index 259 ci
  • JS / d3.js:突出显示相邻链接的步骤

    再会 我之前对该项目的问题是 D3 js 根据相同的 json 值动态生成源和目标 https stackoverflow com questions 41138515 d3 js dynamically generate source a
  • 可以在 d3.js 中使用具有固定圆圈大小的圆圈包布局吗?

    此圆形包布局示例 http bl ocks org 4063269 http bl ocks org 4063269 非常适合我正在从事的项目 但是它会调整所有圆圈相对于彼此的大小 有没有一种简单的方法来指定每个圆的固定半径 我已经搜索了源
  • D3.js折线图溢出边距

    我有 d3 js 折线图 它作为 angular js 应用程序的指令包含在内 动态添加的线和 xAxis 以及缩放线上的边距溢出 我必须在图的顶部为每条加载的线创建 Ox 轴 并具有 Ox 和 Oy 单独的缩放可能性 Oy 缩放工作正常
  • 在 D3 v4 中使用 Zoom.translateExtent 约束地图平移

    我正在尝试显示单个州的地图 并将缩放和平移限制在州的边界内 除了缩放状态路径以适应较小的容器时的平移约束之外 它大部分都在工作 我认为这归结于我不明白该使用什么参数zoom translateExtent 虽然我对此很陌生 所以它可能是别的
  • 窗口调整大小事件上的响应式画布

    我是画布概念的新手 我正在尝试使用 D3 js 绘制画布 我想让画布根据窗口屏幕大小进行响应 function onResize var element document getElementsByTagName canvas 0 var
  • d3.js - 具有树形布局,如何更改 X 轴以使用 D3 中的时间刻度?

    我有这个树布局 需要它在 X 轴上使用时间刻度来将节点固定为日期 另外 我需要保留根节点 它有一个is rootJSON 数据中的属性 在时间范围之外 Here http codepen io anon pen kIJxo是具有树布局工作的
  • 显示具有多个父代的 D3 树

    我目前有this http bl ocks org mbostock 4339083图已实现 我希望在描述具有多个父节点的子节点时保持结构和可折叠性 有没有办法做到这一点 我研究了力图 但我也想保留一组层次结构 这意味着 1 级的父级可以有

随机推荐

  • 如何使用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 在调用文档中创建元素 是否有一种简