• I've got an expandable tree like this: /
• I want to save the state of nodes, so that when you leave the page and e 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 pare 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.

• I've got an expandable tree like this: http://jsbin./okUxAvE/22/
• I want to save the state of nodes, so that when you leave the page and e 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 pare 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.

• javascript
• d3.js

Share Improve this question Follow edited May 23, 2017 at 12:29 CommunityBot 111 silver badge asked Dec 30, 2013 at 9:38 stephenhaystephenhay 2,8742626 silver badges2525 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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/ur5rx/1/

Relevant Docs @ Mozilla Developer Network

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

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.