@litt1e-p/graphi

Graphi

a high performance d3.js graph tree data visualization component for vue

Installation

npm i @litt1e-p/graphi

Usage

1. global registration

// in main.js
import Graphi from '@litt1e-p/graphi'
import '@litt1e-p/graphi/dist/graphi.css'

Vue.use(Graphi)

2. use as vue component

// in your vue file
import { Graphi } from '@litt1e-p/graphi'

export default {
  components: {
    Graphi
  }
  ...
}

Configuration

sample data for v-model:

{
  "name": "d3js.org",
  "childs": [
    {
      "name": "child name 1"
    }
    ...
  ],
  "members": [
    {
      "name": "member name 1"
    }
    ...
  ],
  "outsides": [
    {
      "name": "other name 1"
    }
    ...
  ]
}

<graphi v-model="your data to visualize"/>

for more detail

<graphi v-model="your data to visualize" :conf="{ width: 1000, height: 500, zoomToFit: true, bubbleRadius: 60, arrowOffset: 2, fitScale: 0.6, relations: {'childs': 'sons', ...}}"/>

Screenshots