D3.js附加了错误的位置
D3.js appending wrong location
这里是我的DOM结构的简化版本:
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id=""
viewBox="0 0 745 471">
<defs
id="defs3367" />
<g
style="display:inline"
transform="translate(0,-520.8662)"
id="items">
<rect
ry="0"
rx="0"
y="812.9881"
x="5.7393227"
height="42.501518"
width="733.25098"
id="rect3410">
</g>
</svg>
我有以下D3.js代码:
var svgBlock = d3.select("svg");
var items = svgBlock.selectAll("g#items")
.data(data)
.enter()
.append("g");
我的数据是一个由6个对象组成的数组。
问题是,此代码将5<g>
附加为svg
的子级,而不是<g id="item">
的子级。此外,数据中的第一项根本不会被附加。
欢迎提出任何建议!
d3
追加到您正在调用append的所选对象(在本例中是您的svg
标记)。
要附加到您的目标g
,请执行:
svgBlock.select("g#items") //<-- appending to this g
.selectAll("g") //<-- a selector that matches WHAT you want append
.data(data)
.enter()
.append("g");
事实上,这也应该修复"丢失"的元素。按照您当前编写代码的方式,d3
认为g#items
是六个中的一个,因此它不是输入,也没有附加。
相关文章:
- 传单缩放控制位置错误
- 谷歌地图laravel上圆圈的错误位置
- React JS:未捕获(在承诺中)语法错误:在位置 0 的 JSON 中意外<令牌
- 组中需要Jquery错误位置
- 试图从错误位置加载资源的Rails
- 为什么 angularJS 不直接给出特定的错误位置,而不是给出指向其网站链接的链接,从而给出一些通用解释
- 等号位于错误位置会导致未知令牌异常
- W3C地理位置,错误:位置不可用
- Raphael JS:IE中缩放路径后的错误位置
- JQuery验证器自定义错误位置不起作用
- 在错误位置出现的导航背景中的轻松性
- 在错误位置中使用error.appendTo方法
- 文本区域标签高亮显示应用于第一行之后的错误位置
- Jquery验证多个复选框设置错误位置
- AJAX和PHP/SQL错误位置的不确定性
- 比较两个数组并推入另一个数组中的错误位置元素
- Zurb Foundation 5工具提示位于错误位置
- 错误位置的谷歌地图信息窗口
- HTML5 音频从 Firefox 中的错误位置开始
- 引导 3 在跨两行上使用时弹出错误位置