如何模拟点击 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.idlocalStorage 中的项目（从来没有很多）进行比较，并通过调用模拟点击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 开发者网络

• 创建和触发事件
• event.initMouseEvent
• EventTarget.dispatchEvent