Javascript 如何使用contextmenu将expand all按钮添加到d3.js树

你可以在上面看到我的代码。我是d3.js的新手，我找不到如何在上下文菜单上添加“全部展开”按钮。谢谢你的帮助。。

---

注：我不能使用Jquery。

使用D3实现上下文菜单相当容易。首先创建一个全局变量，用于显示自定义菜单

var contextDiv。然后将单击事件绑定到svg元素：

var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function (d) {
    return "translate(" + source.x0 + "," + source.y0 + ")";
 })
.on("click", click).on("contextmenu", function (data, index) {          
      d3.event.preventDefault();
       // add context menu...
     });;

并实现了该功能

d3.select("svg").on("contextmenu", clickFunction);

function clickFunction() {
    event.preventDefault();

    contextDiv = d3.select("body").append("div")
        .style("position", "absolute")
        .style("top", event.pageY + 1 + "px")
        .style("left", event.pageX + 1 + "px");
    var contextTable = contextDiv.append("table")
        .style("border", "solid 1px");

    contextTable.append("tr")
        .append("td").text("Expand All").attr("id", "citem1");
    contextTable.append("tr")
        .append("td").text("Item2").attr("id", "citem2");
    contextTable.append("tr")
        .append("td").text("Item3").attr("id", "citem3");
    contextTable.on("click", tableClick);
}

现在执行
表格单击
功能

d3.select("svg").on("contextmenu", clickFunction);

function clickFunction() {
    event.preventDefault();

    contextDiv = d3.select("body").append("div")
        .style("position", "absolute")
        .style("top", event.pageY + 1 + "px")
        .style("left", event.pageX + 1 + "px");
    var contextTable = contextDiv.append("table")
        .style("border", "solid 1px");

    contextTable.append("tr")
        .append("td").text("Expand All").attr("id", "citem1");
    contextTable.append("tr")
        .append("td").text("Item2").attr("id", "citem2");
    contextTable.append("tr")
        .append("td").text("Item3").attr("id", "citem3");
    contextTable.on("click", tableClick);
}

最后是
expandAll
函数。请注意，
root
变量必须定义为树的根。这是假设您的树是基于示例的

如果您希望上下文菜单的行为与内置菜单完全相同，那么您还需要做很多事情，但这应该足以让您开始。此外，这是一个内置的行为小提琴