[英]Append DOM element to the D3
我正在使用 D3 在 SVG 上绘图。 我想要的是将 DOM 元素或 HTML 附加到 D3,例如:
task.append(function(model){
//here return html or dom
};
文档说这是可能的,但不幸的是我找不到任何例子或自己找到了如何做到这一点。
试试这个:
d3.select("body").append(function() { return document.createElement("p") });
selection.append() 函数接受以下两种类型之一:
你的问题不是很具体,所以我会在这里做一个疯狂的猜测。
如果您使用创建元素
var newElem = document.createElement(tagname);
要么
var newElem = document.createElementNS(d3.ns.prefix.svg, tagname);
并且您想将该新元素添加到您的 d3 选择中,那么您可以使用以下命令:
mySelection.node().appendChild(newElem)
这基本上会将新元素附加到您选择的第一个节点。 要将元素附加到选择中的每个节点,您需要对 mySelection 进行循环并在每个项目上调用 node() 。
添加多个自定义创建的元素的工作原理相同,但您可以使用element.cloneNode(true)
自己节省一些工作
但是请注意,您不能在普通元素上使用 d3 的任何魔法,除非您将它们包装在d3.select(elem)
。
假设您有两个选择s1和s2,并且您希望将 s2 附加到 s1。 如果两者分别只对一个元素进行选择,那么您可以简单地使用
s1.node().appendChild(s2.node())
要么
s1.append(function() {return s2.node()})
如果 s1 和/或 s2 是对多个元素的选择,您需要先遍历两个选择并使用
s1[i].node().append(s2[j].node())
要么
s1.append(function() {return s2[i].node()})
反而。
这就是使用此信息在我的力导向图表中使用 append() 中的函数创建动态“形状”的方式。
shape = svg.append("g")
.selectAll("rect") // only a placeholder - does not control the shape
.data(force.nodes())
.enter()
.append(function(d){
return setshvape(d)
})
function setshape(d){
if(d.type == "start"){
var shape = document.createElementNS(d3.ns.prefix.svg, "circle");
}else{
var shape = document.createElementNS(d3.ns.prefix.svg, "rect");
}
return shape
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.