在 D3.js 中重新排序 SVG ( z-index ) 元素

2023-11-24

我意识到这个问题以前已经被问过,但我无法深入了解。

这是我的图表...http://www.gogeye.com/financialnews/piechart/index3.html

我想做的就是将硬币渲染在图表后面。我知道 D3 渲染是按照附加顺序进行的。

我尝试重新添加硬币,但似乎无法正常工作。

我尝试过在 DOM 中附加内容时重新排序,但不断收到错误,可能是因为变量在定义之前被调用等。

有人能给我一个如何用我的代码解决这个问题的例子吗?我不想让你为我做这项工作,但我已经胡思乱想了这么久,我似乎无法将别人的例子应用到我的身上。

thanks


我建议使用 svg 创建一些“图层”g代表“组”的元素。

当您渲染图表时,您可以首先定义图层:

var layer1 = svg.append('g');
var layer2 = svg.append('g');
var layer3 = svg.append('g');
// etc... for however many layers you need

然后,当您追加新元素时,您可以决定希望它们位于哪一层,并且以什么顺序分配它们并不重要,因为组元素已经添加到 DOM 中,并且是有序的。例如:

var layer1 = svg.append('g');
var layer2 = svg.append('g');

var redCircle = layer2.append('circle')
    .attr('cx', 50)
    .attr('cy', 50)
    .attr('r', 16)
    .attr('fill', 'red')

var blueSquare = layer1.append('rect')
    .attr('x', 25)
    .attr('y', 25)
    .attr('width', 50)
    .attr('height', 50)
    .attr('fill', 'blue');

在这种情况下,即使蓝色方块是最后创建的,红色圆圈也会在蓝色方块上方可见。这是因为圆形和正方形是不同组元素的子元素,它们按预定义的顺序排列。

这是一个FIDDLE上面的示例,以便您可以看到它的实际效果。

这样做应该可以避免大量猜测何时向图表添加某些元素,并且还有助于将元素组织成更符合逻辑的排列。希望有帮助,祝你好运。

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

在 D3.js 中重新排序 SVG ( z-index ) 元素 的相关文章

  • 如何在codeigniter中将上传图片比例限制为16:9?

    这是我用来上传图像的代码 this gt load gt library upload ext pathinfo file name PATHINFO EXTENSION img name now ext imgConfig upload
  • 图像无法在带有 DOM 的 IE 中加载:控制台中的 7009 错误(无法解码)

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像
  • React-Redux:state.setIn() 和 state.set() 有什么区别?

    我见过使用setIn and set 在一些react redux代码中 state setIn state set 我在这里找到了一些文档https facebook github io immutable js https facebo
  • 有没有办法使用 Rspec/Capybara/Selenium 将 javascript console.errors 打印到终端?

    当我运行 rspec 时 是否可以让 capybara selenium 向 rspec 报告任何 javascript console errors 和其他异常 我有一大堆测试失败 但当我手动测试它时 我的应用程序正在运行 如果不知道仅在
  • 按搜索值过滤元素 - 多个单词

    我有一个由 DIV 和 INPUT 搜索框组成的列表
  • 设置 cookie 时中断 JavaScript 执行

    当设置 cookie 时 是否可以始终中断浏览器开发人员工具中的 javascript 执行 无需显式设置 JS 断点 document cookie 在 html head 块的开头添加此代码片段效果很好
  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre
  • JQuery Mobile 与 MVC 的链接

    我正在使用 ASP NET MVC 3 和 Razor UI 设置 JQuery 移动网站 我正在生成我的链接 例如 a href See Group 2 a 假设我从 Home Index 访问它 我遇到的问题是 当我点击链接时 它会出现
  • Chrome 扩展程序在代码中使用 client_secret

    我正在开发具有自己的 oAuth 授权的 Google Chrome 扩展 当然 我必须使用 client id 和 client secret 作为请求令牌 有什么办法可以向用户隐藏这些数据吗 由于此请求只是 javascript 源代码
  • 使用 Jquery 清除 5 个空 TD

    我有一个正在填充的动态表 我知道我不应该这样做 但是你会如何连续找到 5 个空 TD 并隐藏它们呢 因此 如果行包含 5 个空 TD 则不显示 TD 我想删除每个实例 td td td td td td td td td td 在 DOM
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • 将 UMD Javascript 模块导入浏览器

    你好 我正在对 RxJS 进行一些研究 我可以通过在浏览器中引用它来使用该库 如下所示 它使用全局对象命名空间变量 Rx 导入 我可以制作可观察的东西并做所有有趣的事情 当我将 src 更改为指向最新的 UMD 文件时 一切都会崩溃 如下所
  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • Chrome//kendoUI/jQuery:超出最大调用堆栈大小

    我正在使用 hottowell 模板来创建 spa 应用程序 并且我从 jquery 中收到了一个很好的错误 基本上我的问题从此刻开始尝试绑定我的视图 viewModelBinder js 来自 durandal 库 viewModelBi
  • 如何使用 crypto-js 解密 AES ECB

    我正在尝试将加密数据从 flash 客户端 发送到服务器端的 javascript 在 asp 中作为 jscript 运行 有几个 javascript Aes 库 但它们实际上没有文档记录 我正在尝试使用 crypto js 但无法让代
  • 在 Javascript 中连接空数组

    我正在浏览一些代码 我想知道这有什么用处 grid push concat row 根据我的理解 它等同于 grid push row 为什么要大惊小怪 连接 你想使用 concat当您需要展平数组并且没有由其他数组组成的数组时 例如 va
  • Javascript Replace() 和 $1 问题

    我正在尝试创建一个脚本来搜索文本中的模式并在它找到的字符串周围包裹一个标签 shop attributes td each function this html function i html return html replace E 0
  • 循环内的异步性

    我正在使用 jQuery getJSON 用于从一组实用程序的给定 URL 检索数据的 API 我真的很想找到一种为每个实用程序重用代码 完全相同 的方法 由于循环的执行与 ajax 调用无关 因此我无法找到保留循环值的方法 我知道这个描述

随机推荐

  • HTML + CSS:没有句点的有序列表?

    我认为这个问题的答案是否定的 但是有人知道一种 HTML CSS 方法来创建一个数字后面没有句点的有序列表吗 或者 指定分隔符 理想情况下 我不想为每个数字使用不同的类进行列表样式图像 但这就是我到目前为止所能想到的 这看起来非常不语义 I
  • 如何确定Python中嵌套数据结构的类型?

    我目前正在将一些 Python 翻译成 F 具体来说神经网络和深度学习 为了确保数据结构正确转换 需要 Python 中嵌套类型的详细信息 这type 函数适用于简单类型 但不适用于嵌套类型 例如在 Python 中 gt data 1 2
  • 创建缓冲区时“尚未创建缓冲区”

    我有 我认为是 一个简单的 JFrame BufferStrategy 它是这样创建的 Buffer container createBufferStrategy 2 strategy container getBufferStrategy
  • 代理对是如何计算的?

    如果 unicode 代码点使用 17 位或更多 则如何计算代理对 Unicode 代码点是范围从 0x000000 到 0x10FFFF 的标 量值 因此它们是 21 位整数 而不是 17 位 代理对是 UTF 16 形式的一种机制 这将
  • AngularJS 模型

    我正在尝试了解 AngularJS 我很喜欢它 但我似乎忽略了一个核心概念 模型在哪里 例如 如果我有一个显示多个交易列表的应用程序 一个列表向服务器查询匹配某些条件的一组分页事务 另一个列表使用不同的条件 但可能有一些事务匹配这两个条件并
  • 我可以在 Visual Studio 2008 中针对 .NET Framework 4 进行开发吗?

    我的 ASP NET 应用程序在 Web 服务器上的 IIS 中运行 并使用 Microsoft NET Framework 4 Beta 2 其应用程序池设置为 NET Framework 版本 NET Framework v4 0 21
  • AngularJS:指令无法访问隔离范围对象

    我试图在具有隔离范围的指令中添加一些默认值 基本上 当我的指令被绑定时 我需要使用作用域对象进行一些 DOM 操作 下面是我的代码 控制器 angular module ctrl controller TempCtrl function s
  • 为什么这个苹果触摸图标不起作用?

    我的网站中有以下代码 当我在 Firefox 中查看源代码并单击 href 属性时 图标会显示 因此它不是 404 错误 当代码添加到页面时 例如http website com mobile index php or http websi
  • INSTALL_FAILED_USER_RESTRICTED :使用 redmi 4 设备的 android studio

    遇到这个奇怪的错误 Installation failed with message Failed to finalize session INSTALL FAILED USER RESTRICTED Install canceled by
  • matplotlib 颜色条中的小刻度

    我目前正在尝试在颜色栏中设置小刻度 但根本无法使其工作 我尝试过 3 种方法 参见下面的代码 但它们似乎都不起作用 颜色条中是否真的可能有微小的刻度 import numpy as np import matplotlib pyplot a
  • 有符号零的最小值和最大值

    我担心以下情况 min 0 0 0 0 max 0 0 0 0 minmag x x maxmag x x 根据维基百科 IEEE 754 2008说的是关于最小值和最大值 定义了最小和最大操作 但为输入值相等但表示不同的情况留有一些余地
  • 如何在 matplotlib.pyplot.imshow 中使用“范围”

    我设法绘制了我的数据 并想为其添加背景图像 地图 数据是按长 纬度值绘制的 我也有图像三个角 左上角 右上角和左下角 的长 纬度值 我试图弄清楚如何在 imshow 中使用 范围 选项 然而 我发现的例子并没有解释如何为每个角分配 x 和
  • prestashop 将图像添加到产品中

    我有一个产品对象 我正在 PHP 脚本中创建它 我需要添加缩略图和大图像 它们位于 zip 文件中 文件名包含产品 ID 在代码中实现此目的的最佳方法是什么 我假设我需要将图像提取到文件系统中的某个位置 但我不知道 prestashop 如
  • JTable 准备编辑器如何工作

    我不明白prepareEditor是如何工作的 我无法使用prepareEditor中的Action设置prepareRenderer的可见性规则 正如我在附图中捕获的那样 第 1 行的规则按我的预期工作 如果未选择 JCheckBox 也
  • 错误 C2678:二进制“=”:找不到采用“const Recipe”类型的左侧操作数的运算符(或者没有可接受的转换)

    我正在尝试对每个元素中包含一个 int 和一个字符串的向量进行排序 它是一个类类型的向量 称为向量食谱 出现上述错误 这是我的代码 在我的 Recipe h 文件中 struct Recipe public string get cname
  • MySQL 的密钥文件不正确

    我遇到了一个 InnoDB 表的问题 表最初是 MyISAM 但不久前也将其转换为 InnodB 我正在尝试运行此查询 SELECT posts id posts post title FROM rss posts AS posts INN
  • 在 jQuery 中创建 div 元素 [重复]

    这个问题在这里已经有答案了 我如何创建一个div元素在jQuery 从 jQuery 1 4 开始 您可以将属性传递给自封闭元素 如下所示 jQuery div id some id class some class some other
  • socket.error: [Errno 32] 管道损坏

    我编写了一个客户端 服务器 python 程序 其中客户端将列表发送到服务器 服务器接收数组 删除列表的前两个元素并将其发送回客户端 服务器接收列表没有问题 但是当服务器想要发回编辑后的列表时 它显示错误 socket error Errn
  • 如何在 Visual Studio 中静态链接 VCPKG 生成的 .lib 文件

    我使用 VCPKG 构建第三方库 例如 libcurl 我有动态和静态构建 显然 导入 lib和对象 lib文件分别包含在两个不同的文件夹中 x64 windows和x64 windows static 我想将对象 libcurl lib
  • 在 D3.js 中重新排序 SVG ( z-index ) 元素

    我意识到这个问题以前已经被问过 但我无法深入了解 这是我的图表 http www gogeye com financialnews piechart index3 html 我想做的就是将硬币渲染在图表后面 我知道 D3 渲染是按照附加顺序