Vue component to display tree based on D3.js layout.
Vue.D3.tree
Use this Vue component to render D3 - Data-Driven Documents in tree or cluster layouts.
Example
Install
via NPM
npm install vued3tree
Usage
<template>
<div class="container">
<tree :data="tree" :node-text="name" :type="cluster" layoutType="euclidien">
</tree>
</div>
</template>
<script>
import tree from 'vued3tree'
export default {
data () {
return {
tree: {
name: 'index',
children: [
{
name: 'post1',
children:
[
{name: 'subject1'},
{name: 'subject2'}
]
},
{
name: 'post2',
children: [
{name: 'subject3'},
{name: 'subject4'}
]
}
]
}
},
components: {
tree
}
}
</script>
For details regarding props check the documentation.
Vue.D3.tree is available on GitHub