olink

d3 organization tree chart

Usage no npm install needed!

<script type="module">
  import olink from 'https://cdn.skypack.dev/olink';
</script>

README

olink

d3 organization tree chart

usage

  1. node data structure
{
  nodeId: string | number,
  nodeName: string,
  parentNodeId: string | number,
  width: number,
  height: number,
  borderWidth: number,
  borderRadius: number,
  borderColor: {
    red: number,
    green: number,
    blue: number,
    alpha: number
  },
  backgroundColor: {
    red: number,
    green: number,
    blue: number,
    alpha: number
  },
  connectorLineColor: {
    red: number,
    green: number,
    blue: number,
    alpha: number
  },
  connectorLineWidth: number,
  expanded: boolean,
  template: string
}
  1. render example:
new Olink()
  .container('#container')
  .data(data)
  .svgWidth(375)
  .initialZoom(0.55)
  .onNodeClick(node => console.info('sel', node))
  .render()