初探G6, 切换数据时保证图位置不变

 const data = {
  nodes: [{
    id: '收集日志',
    label: 'aaa',
  }, {
    id: '入 es 集群',
    label: 'bbb',
  }, {
    id: '入 hdfs',
    label: 'ccc',
  }, {
    id: 'hive 计算',
    label: 'ddd',
  }, {
    id: 'report',
    label: 'eee',
  }],
  edges: [{
    source: '收集日志',
    target: '入 es 集群'
  }, {
    source: '收集日志',
    target: '入 hdfs'
  }, {
    source: '入 hdfs',
    target: 'hive 计算'
  }, {
    source: '入 es 集群',
    target: 'hive 计算'
  }, {
    source: 'hive 计算',
    target: 'report'
  }]
};
       const datas = {
  nodes: [{
    id: '收集日志',
    label: 111,
  }, {
    id: '入 es 集群',
    label: 222,
  }, {
    id: '入 hdfs',
    label: 333,
  }, {
    id: 'hive 计算',
    label: 444,
  }, {
    id: 'report',
    label: 555,
  }],
  edges: [{
    source: '收集日志',
    target: '入 es 集群'
  }, {
    source: '收集日志',
    target: '入 hdfs'
  }, {
    source: '入 hdfs',
    target: 'hive 计算'
  }, {
    source: '入 es 集群',
    target: 'hive 计算'
  }, {
    source: 'hive 计算',
    target: 'report'
  }]
};
class IntroCard extends React.Component {
  constructor(props) {
        super(props);
        this.state = {
            showImage: true,
        };
        this.graph = null;
    }
  componentDidMount() {
      this.rendeG6(data);
    }
    rendeG6 = (data) => {
  this.graph= new G6.Graph({
  container: 'mountNode',
  // fitView: 'cc',
  height: window.innerHeight, // 画布高
  plugins: [new G6.Plugins['layout.dagre']()],
  defaultIntersectBox: 'rect' // 使用矩形包围盒
});

this.graph.node({
  shape: 'rect',
  label: function label(model) {
    return model.label;
  },

  style: {
    stroke: '#00C0A5',
    fill: '#92949F',
    fillOpacity: 0.45,
    lineWidth: 2
  }
});
this.graph.edge({
  style: {
    endArrow: true
  }
});
      let lastPoint = 0;
        this.graph.on('drag', (ev) => {
          this.graph.css({
            cursor: 'pointer',
          });
          if (lastPoint) {
            this.graph.translate(ev.domX - lastPoint.x, ev.domY - lastPoint.y);
          }
          lastPoint = {
            x: ev.domX,
            y: ev.domY,
          };
        });
        this.graph.on('dragend', () => {
          this.graph.css({
            cursor: 'default',
          });
          lastPoint = undefined;
        });
this.graph.read(data);
    }
    onload = () => {
      this.graph.read(datas);
    }
    onback = () => {
       this.graph.read(data);
    }
  render() {
    return (
      <div>
        <button onClick={this.onload}>切换数据</button>
        <button onClick={this.onback}>元数据</button>
        <div id="mountNode"></div>
       </div>
    )
  }

};
复制代码

codepen地址

转载于:https://juejin.im/post/5c1a0f3ce51d45255514a24d