将DOM元素附加到D3上

Question

我正在使用D3来在SVG上绘制。我想要的是将DOM元素或HTML追加到D3中，就像这样：

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

文档显示可能有解决方法，但我很遗憾找不到任何示例或无法自己解决。

- Jack Spektor

---

需要更多明确的信息！您是否希望将HTML元素添加到画布中？什么是“任务”和“模型”？您不应该考虑删除“SVG”标记吗？ - Vikram Deshmukh

是的，我需要在画布上添加一些HTML。任务是D3选择。 - Jack Spektor

如果您想将DOM元素绘制到画布上，则可以参考此链接了解如何操作。但是，如果您希望将HTML元素附加到画布上，则很遗憾地告诉您这是不可能的。 - Vikram Deshmukh

@AmeliaBR 小姐，问题已经被编辑以将“canvas”替换为“svg”。在这种情况下，我的回答是恰当的，没有令人困惑。 - Vikram Deshmukh

@srvikram13 是的，抱歉给你带来冒犯的感觉 -- 在留下评论后我查看了编辑日志。 - AmeliaBR

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()})

改为使用其他方式。

- Hubert Grzeskowiak

---

或者使用函数：s1.append(function() { return s2.node() }); - roland

感谢 @roland，将您的建议添加到答案中。 - Hubert Grzeskowiak

Answer 2

试试这个：

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

- guest

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
}

- alQemist