README
Graphi
a high performance d3.js graph tree data visualization component for vue
Installation
npm i @litt1e-p/graphi
Usage
- global registration
// in main.js
import Graphi from '@litt1e-p/graphi'
import '@litt1e-p/graphi/dist/graphi.css'
Vue.use(Graphi)
- 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', ...}}"/>