如何隐藏树布局并在以后检索？

Question

我有一组单选按钮。每次单击单选按钮时，都会根据所选的单选按钮填充SVG。该SVG是一个交互式树（折叠/展开）。我想在一些用户交互后维护此树的布局。如何保持我的布局？

在单击方法（单击节点）上，我生成一个名为“状态”的新属性，该属性可以是“打开”或“关闭”。我想将此属性存储在我的对象上，以便再次获取它时，将处理state属性。但是，它不是存储该属性。

这是我的点击方法：

function click(d) {
    if (d.children) {
        d._children = d.children;
        d.children = null;
    } else {
        d.children = d._children;
        d._children = null;
    }
    if (d.state === undefined || d.state == "closed" || (d.parent.parent !== undefined)) {
        d.state = "open";
    } else {
        d.state = "closed";
    }
    update(d);
}

这是我换出单选按钮的地方：

const fields = $('#radioSection'); // div with all my Radio buttons
fields.on('focus', 'input[type="radio"]', function (event) {
    let json = structure[event.target.id];
    let arr= $.map(json, function (value) {
            return value;
        });
    root = d3.hierarchy(arr[0], function (d) {
            return d.children;
        })
    root.x0 = 0;
    root.y0 = width / 2;
    root.children.forEach(toggleAll); // I want to toggleAll based on the state property

    root.children.forEach(function (d) {
        d.state = "open";
    })
    update(root);

我曾经尝试使用localStorage，但我不太了解/不确定是否需要使用它？我认为可能会有一种更简单的方法。

切换方法-显示节点

    function toggle(d) {
    if (d.children) {
        d._children = d.children;
        d.children = null;
    } else {
        d.children = d._children;
        d._children = null;
    }
}

function toggleAll(d) {
    if (d && d.children) {
        d.children.forEach(toggleAll);
        toggle(d);
    }
}