如何模拟d3树节点上的单击？

I've got an expandable tree like this: http://jsbin.com/okUxAvE/22/

我有一个像这样的可扩展树: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.

我想保存节点的状态,这样当你离开页面并稍后返回时,树就会像你离开时那样扩展。我在Save d3树状态下询问了localStorage,并解决了那部分难题;保存到localStorage就像一个魅力。

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

根据节点是展开还是折叠,我要么将节点ID添加到localStorage,要么将其删除,如:

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

这很有效,如果节点3和19被扩展,给我['3','19'](例如)。如果关闭19,则将其从阵列中移除。 (您可以通过单击并在示例的控制台中执行localStorage.openNodes来查看此内容)。

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.

所以我有这些信息并且可以得到它,但是我在检索localStorage数据后尝试以编程方式扩展节点的各种方法似乎充其量只是错误。无论如何,让节点扩展似乎并没有起作用。

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:

我以为我可以将d.id与localStorage中的项目进行比较(从来没有很多)并通过调用click(d)模拟点击,但没有骰子。就像是:

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.

我怎样才能做到这一点?我是否应该尝试点击click()?请不要假设我有大量的JavaScript知识。我正在尽我所能,但我正在学习领域。

2 个解决方案

#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/

演示@ JsFiddle:http://jsfiddle.net/ur5rx/1/

Relevant Docs @ Mozilla Developer Network

#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.

target是您要模拟单击的DOM节点。

#1