Paths.js Tree Demo with Vue.js

Node.vue

<template>
  <g :transform="node.position">
    <circle fill="white" stroke="black" r="5" cx="0" cy="0"/>
    <text 
      transform="translate(-10,-10)" 
      :textAnchor="node.textAnchor">
      {{ node.name }}
    </text>
  </g>
</template>

<script>
  export default {
    props: {
      node: Object
    }
  }
</script>

Tree.vue

<template>
  <div>
    <svg width="500" height="380">
      <g transform="translate(80, 10)">
        <path v-for="curve in curves" :d="curve" fill="none" stroke="gray" />
        <app-node v-for="node in nodes" :node="node" key="key"></app-node>
      </g>
    </svg>
  </div>
</template>

<script>
  import Tree from 'paths-js/tree'
  import ducks from '../data/ducks.json'

  import Node from './Node'

  function children (x) {
    if (x.collapsed) {
      return []
    } else {
      return x.children || []
    }
  }
  
  export default {
    data () {
      return {
        tree: Tree({
          data: ducks,
          children: children,
          width: 350,
          height: 300
        })
      }
    },
    computed: {
      curves () {
        let curves = this.tree.curves.map((c) => {
          return c.connector.path.print()
        })
        return curves
      },
      nodes () {
        let nodes = this.tree.nodes.map((n) => {
          return {
            position: `translate(${n.point[0]}, ${n.point[1]})`,
            textAnchor: children(n.item).length > 0 ? 'end' : 'start',
            name: n.item.name
          }
        })
        return nodes
      }
    },
    components: {
      appNode: Node
    }
  }
</script>

<style scoped>

</style>