D3.js 将自定义html添加到d3 js树中的节点

我正试着建造一棵像树一样的树。我需要为树的每个节点添加一个div和2或3个按钮。单击该节点按钮将显示一个弹出窗口

我正在尝试这种功能 有。但我需要在d3 js树中使用它，因为它的导航和动画都很流畅。

我已经做到了：

• 使用D3树网页中的基本示例
• 在节点中添加了更多SVG元素
• 当您单击节点文本（添加、删除、编辑、移动）以在节点上执行此简单操作时，添加了一个“弹出”菜单

根据我的经验，最好使用SVG元素而不是DIV（可以将按钮显示为图像或形状，文本显示为SVG:text）

下面是一些代码：

function clickLabel(d) {

// this removes the popup if it was displayed on another node beforehand
// is=2 identifies markers... 

d3.selectAll("[marker='2']").remove();

// Every node has an ID, and I add shapes to it

d3.select("[id_node='" + d.id + "']")
    .append("image")
    .attr("marker", 2)
    .attr("xlink:href", "/Content/delete_item.png")
    .attr("x", 0)
    .attr("y", -50)
    .attr("height", 32)
    .attr("width", 32)
    .on("click", removeItem);

d3.select("[id_node='" + d.id + "']")
    .append("image")
    .attr("marker", 2)
    .attr("xlink:href", "/Content/edit.png")
    .attr("x", -50)
    .attr("y", -30)
    .attr("height", 32)
    .attr("width", 32)
    .on("click", editItem); 

d3.select("[id_node='" + d.id + "']")
    .append("image")
    .attr("marker", 2)
    .attr("xlink:href", "/Content/add_item.png")
    .attr("x", 20)
    .attr("y", 10)
    .attr("height", 32)
    .attr("width", 32)
    .on("click", addItem);


d3.select("[id_node='" + d.id + "']")
    .append("image")
    .attr("marker", 2)
    .attr("xlink:href", "/Content/next_item.png")
    .attr("x", -30)
    .attr("y", 20)
    .attr("height", 32)
    .attr("width", 32)
    .on("click", moveItem);

// Stop events or else it gets de-selected
event.stopPropagation();

}

---

希望这有帮助！

您可以使用

.append（“svg:foreignObject”）

向d3 js树中的节点添加自定义html，例如，您迄今为止尝试了什么？有什么特别的困难吗？