【问题标题】：Append DOM element to the D3将 DOM 元素附加到 D3
【发布时间】：2014-03-10 17:38:58
【问题描述】：

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

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

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

【问题讨论】：

需要更清楚！您想将 HTML 元素添加到您的画布吗？ task 和 model 是什么？你不应该考虑删除svg标签吗？
是的，我需要在画布上添加一些 HTML。任务是 d3 选择。
为了更清楚，我需要使用它的 append 方法将 HTML 附加到 d3 选择中。 github.com/mbostock/d3/wiki/Selections#wiki-append
如果你想在画布上绘制 DOM 元素，那么here's the link 会告诉你怎么做。但是，如果您希望将 HTML 元素附加到画布，那么我恐怕要说that can't be done。
您在使用<canvas> 或<svg> 作为您的图表吗？大多数 d3 使用<svg>，恐怕@srvikram13 在这种情况下会让你感到困惑。要在 SVG 中添加 HTML 元素，您必须首先添加 <foreignObject> tag，然后在其中添加 HTML 元素。但是，请注意浏览器支持有些错误。根据您所做的事情，您可能会考虑在 SVG 之上绘制 HTML 元素，而不是它的子元素。查找工具提示示例以了解如何定位它。

标签： javascript html svg d3.js

【解决方案1】：

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

字符串，它是要创建的元素的名称，或者
一个被执行的函数（应用于父级）并且应该返回一个元素或HTML。

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

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

如果你使用

创建了你的元素

var newElem = document.createElement(tagname);

或

var newElem = document.createElementNS(d3.ns.prefix.svg, tagname);

并且您想将该新元素添加到您的 d3 选择中，那么您可以使用它：

mySelection.node().appendChild(newElem)

这基本上会将新元素附加到您选择的 first 节点。要将元素附加到选择中的每个节点，您需要对 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()})

改为。

【讨论】：

或带函数：s1.append(function() { return s2.node() });
感谢@roland，将您的建议添加到答案中。

【解决方案2】：

这就是如何使用这些信息在我的力导向图表中使用 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
}

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：