如何在d3.js树中添加带有contextmenu的全部展开按钮

Question

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...
     });;

You can see my code above. I am new on d3.js and I couldn't find how to add an Expand All button on a context menu. Thanks for your helps.. PS: I mustn't use Jquery.

Answer 1

It's fairly easy to implement a context menu using D3. First create a global variable for displaying the custom menu var contextDiv; . Then bind a click event to your svg element:

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

And implement the function.

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

Now implement the tableClick function.

function tableClick(){
    var target = d3.event.target.id;
    contextDiv.remove();

    if (target == "citem1")
        expand(root);
}

And finally the expandAll function. Note that root variable must be defined as the root of the tree. This is assuming you're basing your tree off This example.

function expand(d) {
    if (d._children) {
        d.children = d._children;
        d.children.forEach(expand);
        d._children = null;
    } else if (d.children) {
        d.children.forEach(expand);
    }
}

There is a lot more you'll have to do if you want your context menu to behave exactly like the inbuilt one, but this should be enough to get you started. Also, here is a Fiddle with this behavior built in.