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