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

Demo @ JsFiddle：http://jsfiddle.net/ur5rx/1/

Mozilla开发者网络相关文档

Answer 2

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

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

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

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

2 个答案: