How can I simulate a click on d3 tree nodes?

Question

• I've got an expandable tree like this: http://jsbin.com/okUxAvE/22/
• I want to save the state of nodes, so that when you leave the page and come back later, the tree is expanded the way it was when you left . I asked about that at Save d3 tree state to localStorage , and that part of the puzzle is solved; saving to localStorage works like a charm.

Depending on whether the node is expanded or collapsed, I'm either adding the node ID to localStorage or removing it, like:

var nodeState = JSON.parse(localStorage['openNodes']);
nodeState.push(d.id);
localStorage['openNodes'] = JSON.stringify(nodeState);

(Apparently, I should change this to dot notation.)

This works well, giving me ['3','19'] (for example) if nodes 3 and 19 are expanded. If 19 were closed, it is removed from the array. (you can see this by clicking around and then doing localStorage.openNodes in the example's console).

So I have this information and can get it, but the various ways I've tried expanding the nodes programmatically after retrieving the localStorage data seem to be buggy at best. In any case, getting the nodes to expand doesn't seem to be working.

I thought I could compare the d.id to the items in localStorage (there are never many) and simulate a click by calling click(d) , but no dice. Something like:

if (localStorage['openNodes']) {

  var savedState = JSON.parse(localStorage['openNodes']);

  for(var i = 0; i < savedState.length; i++) {
    if (d.id === savedState[i]) {
      // simulate click/call click()/something else
    }
}

How can I do this? Should I even be trying to call click() at all? Please don't assume extensive JavaScript knowledge on my part. I'm doing my best, but I'm in learning territory.

Answer 1

You can simulate click event with following function:

function simulateClick(elem /* Must be the element, not d3 selection */) {
    var evt = document.createEvent("MouseEvents");
    evt.initMouseEvent(
        "click", /* type */
        true, /* canBubble */
        true, /* cancelable */
        window, /* view */
        0, /* detail */
        0, /* screenX */
        0, /* screenY */
        0, /* clientX */
        0, /* clientY */
        false, /* ctrlKey */
        false, /* altKey */
        false, /* shiftKey */
        false, /* metaKey */
        0, /* button */
        null); /* relatedTarget */
    elem.dispatchEvent(evt);
}

Demo @ JsFiddle: http://jsfiddle.net/ur5rx/1/

Relevant Docs @ Mozilla Developer Network

• Creating and triggering events
• event.initMouseEvent
• EventTarget.dispatchEvent

Answer 2

You could use this to fake a user click:

var fakeClick = function(target) {
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click');
    target.dispatchEvent(event);
};

target is the DOM node you want to simulate a click on.