如何模拟对 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 开发者网络

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

Answer 2

您可以使用它来伪造用户点击：

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

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