How to use d3-state-visualizer - 10 common examples

port.postMessage({tabId: chrome.devtools.inspectedWindow.tabId});

// 生成状态树
const config = {
  state: {},
  id: 'vuexTree',
  size: window.innerWidth - 20,
  aspectRatio: 0.5,
  isSorted: false,
  widthBetweenNodesCoeff: 1.5,
  heightBetweenNodesCoeff: 2,
  tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 },
  transitionDuration: 700
}

const render = tree(document.getElementById('app'), config);

let stateOld = {};
port.onMessage.addListener(function(message, sender, sendResponse) {
  if(!message && JSON.stringify(stateOld) === '{}') return;
  if(JSON.stringify(message) === JSON.stringify(stateOld)) return;
  removeElement(document.getElementById('notFound'));
  stateOld = message;
  render(message);
});

import React from 'react';
import d3 from 'd3';
import App from './components/App';
import react2tree from 'react2tree';
import { tree } from 'd3-state-visualizer';

const hierarchy = React.render(, document.createElement('div'));

const initialize = tree();

const render = initialize(d3, document.getElementById('root'), {
  tree: react2tree(hierarchy),
  heightBetweenNodesCoeff: 1.5
});

render();

componentDidMount() {
    this.renderChart = tree(
      this.node,
      { ...defaultOptions, onClickText: this.onClickText }
    );
    this.renderChart(this.props.data);
  }

createChart(props) {
    this.renderChart = tree(this.node, this.getChartTheme(props.theme));
    this.renderChart(props.data);
  }

componentDidMount() {
    const { select, state, defaultIsVisible } = this.props;
    this.renderChart = tree(findDOMNode(this), this.props);
    if (defaultIsVisible) {
      this.renderChart(select(state));
    }
  }

{ title: 'visualizer' },
      { title: 'tree' }
    ],
    completedCount: 1,
    alphabeticalOrder: true
  },
  someStore: {
    someProperty: 0,
    someObject: {
      anotherProperty: 'value',
      someArray: [0, 1, 2]
    }
  }
};

const render = tree(document.getElementById('root'), {
  state: appState,
  id: 'treeExample',
  size: 1000,
  aspectRatio: 0.5,
  isSorted: false,
  widthBetweenNodesCoeff: 1.5,
  heightBetweenNodesCoeff: 2,
  style: {border: '1px solid black'},
  tooltipOptions: {offset: {left: 30, top: 10}, indentationSize: 2}
});

render();

left: 50,
                    top: 10
                },
                indentationSize: 2,
                style: {
                    background: '#222',
                    padding: '8px',
                    color: '#4FDEE5',
                    'border-radius': '2px',
                    'box-shadow': '0 7px 7px 0 #111',
                    'font-size': '13px',
                    'line-height': '1.3'
                }
            }
        };
        this.renderChart = tree(findDOMNode(this), config);
        this.renderChart();
    }

import { forceGraph } from 'd3-state-visualizer';
import d3 from 'd3';

const appState = {
  foo: ['1', '2', '3'],
  bar: 3,
  baz: { some: 'value' },
  todo: ['a', 'b']
};

const nodes = Object.keys(appState).map(key => ({
  key,
  [key]: appState[key]
}));

const initialize = forceGraph();

const render = initialize(d3, document.getElementById('root'), {
  data: nodes,
  id: 'forceGraphExample',
  size: 1000,
  aspectRatio: 1,
  charge: -50,
  linkDistance: 50,
  maxNodeSize: 50
});

render();

import { forceGraph } from 'd3-state-visualizer';
import Chart from './components/Chart';

const appState = {
  foo: ['1', '2', '3'],
  bar: 3,
  baz: { some: 'value' },
  todo: ['a', 'b']
};

const nodes = Object.keys(appState).map(key => ({
  key,
  [key]: appState[key]
}));

const initialize = forceGraph();

React.render(
  
  , document.getElementById('root')
);

componentDidMount() {
    this.renderChart = tree(React.findDOMNode(this), this.props);
    this.renderChart();
  }