我可以使用图像作为 d3 树形图的背景矩形吗?

2023-11-25

是否可以在 d3 中制作一个树形图,每个矩形的背景都是图像?我正在寻找类似于 Silverlight 中所做的事情here,但对于 d3。如果可能的话,是否有任何推荐的教程来演示将背景连接到图像的过程?


是的,有多种方法可以在 SVG 中使用图像。您可能想将图像定义为图案,然后用它来填充矩形。有关更多信息,请参见这个问题(无论您要填充哪个元素,过程都是相同的)。

在 D3 代码中,它看起来像这样(简化的)。

svg.append("defs")
   .append("pattern")
   .attr("id", "bg")
   .append("image")
   .attr("xlink:href", "image.jpg");

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

我可以使用图像作为 d3 树形图的背景矩形吗? 的相关文章

  • 分层边缘捆绑:添加父组标签

    我对 HTML 和 JavaScript 还很陌生 我面临着著名的分层边缘捆绑可用here https bl ocks org mbostock 7607999 由 D3 js 库生成 My goal is to add a semi ci
  • 数据与线的日期和时间转换

    我使用 D3 V5 创建了此图表 另外 我已在小提琴上附加了示例数据 您可以点击此处查看 https plnkr co edit pINxcS9yt9AuJmSk02Fs p preview 我已经包括了tick函数代码块 它在向左滑动的路
  • d3.js v4 中的 d3.locale(),本地化

    我正在使用 d3 js 制作图表 现在想将其更新到 v4 结果发现d3 locale 由于所有日期格式的翻译都采用不同的语言 因此不再起作用 我该如何解决这个问题 我正在挖掘论坛 但对于 v4 我并没有真正找到它 你必须使用d3 timeF
  • d3.js 和 Chart.js 之间的比较(仅适用于图表)[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我在项目中多次使用过 Chart js 但从未使用过 d3 js 很多人说 d3 js 是最好的图表 javascript 框架 但没
  • 通过 Fabric.js 推送 D3.js 输出以支持 IE8?

    我正在评估Fabric js http fabricjs com 作为替代拉斐尔 js http raphaeljs com 用于创建与 IE8 兼容的交互式可视化 IE8 不支持 SVG 或画布 不幸的是 IE8 支持是不可协商的 Rap
  • 使用 d3.json()/d3.xhr() 进行多部分发布请求

    目前是否不支持通过请求提交多部分表单数据 我了解如何使用 d3 json post 执行 POST 如上所述here https stackoverflow com questions 12493758 xhr post request u
  • 需要帮助在 D3.js 条形图中将 x 轴刻度与条形对齐

    我有一个可用的线性条形图D3 js http d3js org 它也有基于时间的 x 轴 条形图绑定到计数属性 而轴绑定到日期属性 轴上的刻度未与条形对齐 知道如何将它们两者排列起来吗 这是 jsFiddle http jsfiddle n
  • D3.js 中的点图

    我有兴趣创建一个Dot plot 每个数据值都有连续的点 但到目前为止我所管理的是为每个值创建一个点 更清楚地说 假设对于 array1 我希望第一个值创建 5 个圆圈 第二个值创建 4 个圆圈 依此类推 array1 5 4 2 0 3
  • 如何使用 d3.v4 中的 JSON 数据创建树布局 - 不使用 stratify()

    我正在尝试将一些 d3 代码从 v3 更新到版本 4 我有一个使用 JSON 数据的树形图 d3 v4 示例展示了如何使用 stratify 将表格数据 例如flare csv 转换为分层数据https bl ocks org mbosto
  • D3:如何在Groups of Force布局节点上绘制多个凸包?

    我试图在力布局中的所有组上绘制凸包 但我只画出了一半的凸包 当 D3 尝试绘制其余的船体时 控制台返回错误 元素尚未创建 然而 当我检查控制台中的 groups 变量时 所有组数据都在那里 x y 数据都设置得很好 见下图 我什至尝试在ti
  • 暂停和恢复过渡

    我在用setInterval 因此转换会在一定时间间隔后发生 是否可以使用 setInterval 暂停和恢复工作 任何正确方向的建议 指示都会非常有帮助 这个问题是在 D3 v3 是最新版本时发布的 5年后D3 v5有了一些新方法 比如s
  • D3.js分组条形图

    I am making a bar chart using D3 js like this source statcan gc ca http www statcan gc ca pub 12 593 x 2007001 figures f
  • 如何在没有 DOM 的情况下将 javascript 作为 node.js 脚本运行?

    https github com jasondavies d3 cloud https github com jasondavies d3 cloud是一个使用 D3 库的 javascript 文字云 这是一个交互式演示 http www
  • 使用 CSS Grid,从任何地方滚动 div(不使用 jQuery 插件)

    div 怎样才能 scroll content https jsfiddle net blehmanade x1k3rhj7 33 可以从页面上的任何位置滚动吗 现在 scroll content仅当鼠标位于其上方时才可滚动 但是 当鼠标位
  • GeoJson 世界数据库 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在开发一个项目 需要使用 d3 js 显示国家和城市的地图 实际上 D3支持GeoJson格式 通常
  • 根据边界动态设置初始 d3 缩放 - V4

    我要在页面上显示大量节点 大多数情况下 由于节点放置 圆圈会超出屏幕的可见区域 有没有办法根据节点的整个边界框动态设置初始缩放级别 以便所有节点都适合屏幕的可见区域 Updated 我为此添加了一个小提琴https jsfiddle net
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • nvd3 格式化日期始终返回 1970-01-01

    我正在尝试使用构建折线图nvd3 for d3js但我在 x 轴上使用日期域时遇到了一些问题 这是我的代码 data lineChart key key1 values x 2014 04 20 y 6 x 2014 04 13 y 5 x
  • D3 围绕一组圆圈绘制船体

    我想用 d3 围绕分组力定向图构建绘制一个船体 我已经用圆圈构建了图表 但我现在想将圆的交点与路径 船体 连接起来 如果不连接交叉点 画一个围绕这组圆的船体就足够了 我尝试过具有凸包的力导向布局 http bl ocks org 29205
  • 为什么我的 D3 SVG 图上的轴不会更新?

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

随机推荐

  • PyTorch安装失败找不到满足要求的版本

    我正在尝试安装PyTorch在 Windows 10 专业版 64 位操作系统 PC 机上使用 PyCharm Community Edition 2020 2 3 x64 和 Python 3 9 0 我试过了 pip install t
  • 在Go中模拟tcp连接

    在 Go 中 TCP 连接 net Conn 是 io ReadWriteCloser 我想通过模拟 TCP 连接来测试我的网络代码 我有两个要求 要读取的数据存储在字符串中 每当写入数据时 我希望将其存储在某种稍后可以访问的缓冲区中 是否
  • Visual Studio Designer 可以显示继承泛型类型的类吗?

    我正在尝试清除解决方案中的所有设计器错误 但遇到了以下错误 无法显示此文件的设计器 因为无法设计其中的任何类 设计者检查了文件中的以下类 DoubleAttributeTextBoxBase 无法加载基类 NumericAttributeT
  • 如何显示 ANTLR 树 GUI

    如果您有这样的代码 无论是控制台还是 Swing 如何显示 AST GUI 我的 ANTLR 是版本 3 CharStream stream new ANTLRStringStream program XLSample1 n constan
  • 升级到 Mac OS 10.15 (Catalina) 后 MongoDB 找不到数据目录

    我今天更新到了 MacOS 10 15 Catalina 当我跑步时mongod在终端中找不到 data db目录 Users william gt mongod 2019 10 08T17 02 44 183 0800 I CONTROL
  • 为什么嵌入框阴影不适用于图像?

    我有一个使用插入框阴影的容器 容器包含图像和文本 嵌入阴影显然不适用于图像 这里的白色部分是容器 它包含一个白色图像 并且应用了嵌入框阴影 body background color 000000 main position absolut
  • Lua - 打包 IEEE754 单精度浮点数

    我想用纯Lua创建一个函数来生成一个fraction 23位 一个exponent 8位 和一个sign 1 位 来自一个数字 因此该数字约等于math ldexp fraction exponent 127 sign 1 and 1 or
  • 如何从命令行创建一个空的变更列表

    我正在尝试使用以下命令从命令行创建一个空的更改列表p4 change i但似乎这个命令什么也没做 我没有收到任何错误 成功消息 命令行只是不返回任何内容 我必须用 ctrl c 杀死它 我的 p4 客户端可以工作 我能够看到我的所有信息并正
  • 确定复制到剪贴板的文件是否是图像

    用户右键单击文件 例如在桌面上 并单击 复制 现在如何在 C 中确定复制到剪贴板的文件是否是图像类型 Clipboard ContainsImage 在这种情况下不起作用 下面判断是否将图像直接复制到剪贴板 而不是文件是否复制到剪贴板 ID
  • 使用 OAuth2 保护 Flask-Restful API

    好的 我使用 Flask Restful 编写了一个 API 现在我想实现 OAuth2 授权 我试过了pyoauth2 但它没有记录 并且tutorial相当复杂 所以 我的问题是 我该怎么做 按照flask oauthlib 指南进行基
  • 如何在后台运行Android应用程序?

    此代码将在系统启动后自动运行应用程序 但按后退按钮后应用程序将关闭 如果单击应用程序的图标可以正常运行该应用程序 即使按后退按钮或运行其他应用程序后 它也会持续运行 public class AutoBoot extends Broadca
  • 使用 JSTL 为 JSP 下拉列表选择值

    我在 Servlet 中有 SortedMap 来填充 JSP 中的下拉值 并且我有以下代码 SortedMap
  • Kendo Angular 2 网格日期时间格式

    有谁知道如何在网格中正确格式化日期时间 是否支持此数据类型 无论我在列的 过滤器 属性中输入什么 我的日期似乎都没有被解析 我看到显示的值 日期 1480643052457 非常感谢任何帮助或建议 更新 就像我最终所做的快速更新一样 我只是
  • WCF IClientMessageInspector.BeforeSendRequest 修改请求

    我正在尝试修改 WCF 服务中的请求 public object BeforeSendRequest ref Message request IClientChannel channel string xmlRequest request
  • 间歇性Google地图api授权错误

    今天 我们在浏览器上目睹了谷歌地图 API 的间歇性错误 Google 已禁止使用此应用程序的地图 所提供的 密钥不是有效的 Google API 密钥 或者未获得授权 Google 地图 API 密钥 或者未获得 Google 地图授权
  • 创建按钮单击事件 c# [重复]

    这个问题在这里已经有答案了 我用它做了一个按钮 Button buttonOk new Button 与其他代码一起 如何检测创建的 按钮是否已被单击 并使其如果单击表单将关闭 public MainWindow This button n
  • 如何使用 pip 在 Windows 上安装 Pillow?

    我正在尝试在 Windows 上安装 Pillow 3 1 按照说明 我应该可以输入 pip install Pillow 但我得到 ValueError jpeg is required unless explicitly disable
  • 为什么函数 concat 使用foldr?为什么不折叠

    在大多数资源中 建议使用foldl 但是在concat中使用foldr而不是foldl 的原因是什么 EDIT我在这个答案中谈到了懒惰和生产力 在兴奋中我忘记了 jpmariner 在他们的答案中关注的一个非常重要的点 左关联 是二次时间
  • 设置 JFrame 不与任务栏重叠

    我需要一个未装饰的 JFrame 设置未装饰 true 需要全屏显示 不与任务栏重叠 我已经尝试过以下解决方案 调用 setExtendedState MAXIMIZED BOTH 优势 这按预期工作得很好 即窗口正在动态调整自身 但它有以
  • 我可以使用图像作为 d3 树形图的背景矩形吗?

    是否可以在 d3 中制作一个树形图 每个矩形的背景都是图像 我正在寻找类似于 Silverlight 中所做的事情here 但对于 d3 如果可能的话 是否有任何推荐的教程来演示将背景连接到图像的过程 是的 有多种方法可以在 SVG 中使用