将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.select(elem)中之外，你不能在普通元素上使用任何d3的魔法。

将d3选择附加到d3选择

假设您有两个选项 s1 和 s2 ，并且您希望将s2附加到s1。如果两者分别只选择一个元素，那么您只需使用

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

如果s1和/或s2正在多个元素上进行选择，则需要先对两个选项进行迭代，然后使用s1[i].node().append(s2[j].node())。

Answer 3

这是使用此信息通过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
}