javascript - 如何模拟对 d3 树节点的点击？

Question

• 我有一个像这样的可扩展树:http://jsbin.com/okUxAvE/22/
• 我想保存节点的状态，以便当您离开页面并稍后返回时，树会按照您离开时的状态展开。我在 Save d3 tree state to localStorage 问了这个问题，这部分难题就解决了；保存到 localStorage 就像一个魅力。

根据节点是展开还是折叠，我将节点 ID 添加到 localStorage 或将其删除，例如:

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

(显然，我应该将其更改为点符号。)

这很好用，如果节点 3 和 19 展开，则给我 ['3','19'](例如)。如果 19 已关闭，则将其从数组中删除。 (您可以通过单击然后在示例的控制台中执行 localStorage.openNodes 来查看)。

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

我想我可以将 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
    }
}

我该怎么做？我什至应该尝试调用 click() 吗？请不要假设我具备广泛的 JavaScript 知识。我正在尽力而为，但我还在学习领域。

Answer 1

您可以使用以下函数模拟点击事件:

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

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

相关文档@Mozilla Developer Network

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