将DOM元素附加到D3

Question

我正在使用D3绘制SVG.我想要的是将DOM元素或HTML附加到D3,如:

task.append(function(model){
//here return html or dom
};

文档说它是可能的,但不幸的是我找不到任何例子或者自己发现如何做到这一点.

Answer 1

试试这个:

d3.select("body").append(function() { return document.createElement("p") });

Answer 2

selection.append()函数接受以下两种类型之一:

• 一个字符串,它是要创建的元素的名称,或
• 执行的函数(应用于父级)并应返回元素或HTML.

你的问题不是很具体,所以我会在这里做一个疯狂的猜测.

将自定义创建的元素附加到d3选择

如果您使用创建了元素

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).

将d3选择附加到d3选择

假设您有两个选择s1和s2,并且您希望将s2附加到s1.如果两者分别只选择一个元素,那么您可以简单地使用

s1.node().appendChild(s2.node())

如果s1和/或s2是在多个元素上进行选择,则需要首先迭代这两个选择并s1[i].node().append(s2[j].node())改为使用.