javascript - 将 DOM 元素附加到 D3

Question

我正在使用 D3 在 SVG 上绘图。我想要的是将 DOM 元素或 HTML 附加到 D3，例如:

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

文档说这是可能的，但遗憾的是我找不到任何示例或自己找到如何执行此操作。

Answer 1

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.append(function() {return s2.node()})

如果 s1 和/或 s2 是对多个元素的选择，您需要先遍历这两个选择并使用

s1[i].node().append(s2[j].node())

或

s1.append(function() {return s2[i].node()})

相反。