Question

我已经创建了带有节点创建，删除和重命名功能的d3树形图，如下图所示。

https://bl.ocks.org/adamfeuer/042bfa0dde0059e2b288

如何在此图中实现撤消/重做操作？我在vis.js中找到了一些示例，但在d3.js中找不到。

Answer 1

撤消/重做操作仅将您执行的操作以及您所在位置的索引存储在数组中。每次更改后，您将删除状态后数组中的元素。泡芙，我想举个例子更好

想象一下，您有三个按钮，还有两个用于撤消/重做的按钮

<button (click)="add(0)">add 0</button>
<button (click)="add(1)">add 1</button>
<button (click)="add(2)">add 2</button>
<p>{{values|json}}</p>
<button (click)="undo(2)">undo</button>
<button (click)="redo(2)">redo</button>

在您的组件中，您需要两个变量“ historyIndex”和“ history”

  values: number[] = [];

  history: any[] = [];
  historyIndex: number = -1;

还有我们的函数“添加”，“重做”和“撤消”

  add(value) {
    //remove all next history
    if (this.history.length>this.historyIndex+1)
      this.history.splice(-this.historyIndex - 1);

    //Store the necesary properties to undo/redo
    this.history.push({ index: this.values.length, value: value }); 
    this.historyIndex = this.history.length - 1;   //store the index;
    this.values.push(value);
  }
  undo() {
    //we need remove the element in "this.history[historyIndex]"
    this.values.splice(this.history[this.historyIndex].index, 1);
    this.historyIndex--;
  }
  redo() {
    if (this.history.length > this.historyIndex+1) {
      this.historyIndex++;
      this.values.splice(this.history[this.historyIndex].index, 0,
          this.history[this.historyIndex].value);
    }
  }

请参见stackblitz

我们可以在d3树布局中实现撤消/重做操作吗？

1 个答案: