Как добавить узел в D3. js Дерево в реакции js - PullRequest
Новая
       6

Как добавить узел в D3. js Дерево в реакции js

1 голос
/ 16 января 2020

[CodeSandBox] https://codesandbox.io/s/deliclsdfslkfsdksfslf-rhlw5 ** Я сейчас пытаюсь добавить поддержку динамического добавления (по щелчку) (и удаления по кнопке) ** * Однако я не могу получить узел для повторной визуализации для дочерние элементы (это только для узла root в коде) В частности, следующий блок не выполняет пересчет компоновки для его дочерних элементов. если хотите добавить новый узел в указанный узел, который я нажимаю *

 import React from "react";
import Tree from "react-d3-tree";
import clone from "clone";

let debugData = {
  name: "1",
  children: [
    {
      name: "2"
    }
  ]
};
const containerStyles = {
  width: "100%",
  height: "100vh"
};

export default class CenteredTree extends React.PureComponent {
  state = {
    data: debugData,
    update: {
      children: []
    }
  };
  Count = 0;
  addChildNode = () => {
    var nextData = clone(this.state.data);
    var target = nextData.children;
    this.Count++;
    target.push({
      name: `Inserted Node ${this.Count}`,
      id: `inserted-node-${this.Count}`
    });
    this.setState({
      data: nextData
    });
  };
  removeChildNode = () => {
    const nextData = clone(this.state.data);
    const target = nextData.children;
    target.pop();
    this.count--;
    this.setState({
      data: nextData
    });
  };

  componentDidMount() {
    // Get treeContainer's dimensions so we can center the tree
    const dimensions = this.treeContainer.getBoundingClientRect();
    this.setState({
      translate: {
        x: dimensions.width / 2,
        y: dimensions.height / 2
      }
    });
  }

  render() {
    return (
      <div style={containerStyles} ref={tc => (this.treeContainer = tc)}>
        <button onClick={this.removeChildNode}>Remove Node</button>

        <Tree
          onClick={this.addChildNode}
          data={this.state.data}
          translate={this.state.translate}
          orientation={"vertical"}
        />
      </div>
    );
  }
}
...