Question

我正在尝试构建像d3 js tree这样的树。我需要为该树的每个节点在该div中添加一个div和2或3个按钮。单击该节点按钮应显示弹出窗口。

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

Answer 1

我做到了：

使用D3树网页的基础示例。
在节点中添加了更多SVG元素
添加了一个＆＃34; popup＆＃34;单击节点文本（添加，删除，编辑，移动）以在节点上执行此简单操作时的菜单。

根据我的经验，最好使用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();

}

希望这有帮助！

Answer 2

您可以使用.append("svg:foreignObject")将自定义html添加到d3 js树中的节点，例如jsfiddle example

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

2 个答案: