javascript 将 DOM 元素附加到 D3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21727202/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Append DOM element to the D3
提问by Hyman Spektor
I'm using D3 for drawing on the SVG. What I want is to append DOM element or HTML to the D3, like:
我正在使用 D3 在 SVG 上绘图。我想要的是将 DOM 元素或 HTML 附加到 D3，例如：
task.append(function(model){
//here return html or dom
};
Documentation says it's possible, but unfortunately I can't find any example or found out how to do this myself.
文档说这是可能的，但不幸的是我找不到任何例子或自己找到了如何做到这一点。
回答by guest
Try this:
试试这个：
d3.select("body").append(function() { return document.createElement("p") });
回答by Hubert Grzeskowiak
The selection.append() function accepts one of two types:
selection.append() 函数接受以下两种类型之一：
- A stringwhich is the name of an element to create, or
- A functionwhich is executed (applied on parent) and should return an element or HTML.
- 一个字符串，它是要创建的元素的名称，或
- 执行（应用于父级）并应返回元素或 HTML的函数。
Your question wasn't very specific, so I'll do a wild guess here.
你的问题不是很具体，所以我会在这里做一个疯狂的猜测。
Appending custom created elements to a d3 selection
将自定义创建的元素附加到 d3 选择
If you created your element using
如果您使用创建元素
var newElem = document.createElement(tagname);
or
或者
var newElem = document.createElementNS(d3.ns.prefix.svg, tagname);
and you want to add that new element to your d3 selection then you can use this:
并且您想将该新元素添加到您的 d3 选择中，那么您可以使用以下命令：
mySelection.node().appendChild(newElem)
This will basically append the new element to the firstnode from your selection. For appending the element to every node from the selection you'd need to make a loop over mySelection and call node() on every single item.
这基本上会将新元素附加到您选择的第一个节点。要将元素附加到选择中的每个节点，您需要对 mySelection 进行循环并在每个项目上调用 node() 。
Adding multiple custom created elements works the same, but you can save yourself some work using element.cloneNode(true)
添加多个自定义创建的元素的工作原理相同，但您可以使用 element.cloneNode(true)
Note however that you can't use any of d3's magic on plain elements, except you wrap them in d3.select(elem).
但是请注意，您不能在普通元素上使用 d3 的任何魔法，除非您将它们包装在d3.select(elem).
Appending a d3 selection to a d3 selection
将 d3 选择附加到 d3 选择
Let's assume you have two selections s1and s2and you want s2 to be appended to s1. If both are selections over only one element respectively, then you can simply use
假设您有两个选择s1和s2，并且您希望将 s2 附加到 s1。如果两者分别只对一个元素进行选择，那么您可以简单地使用
s1.node().appendChild(s2.node())
If s1 and/or s2 are being selections over multiple elements you need to iterate over both selections first and use s1[i].node().append(s2[j].node())instead.
如果 s1 和/或 s2 是对多个元素的选择，您需要先遍历两个选择并s1[i].node().append(s2[j].node())改为使用。
回答by alQemist
This is how used this information to create dynamic "shapes" in my force-directed chart using a function inside append().
这就是使用此信息在我的力导向图表中使用 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
}
