Update documentationVue components to display graphics based on D3.js layout.

https://david-desmaisons.github.io/Vue.D3.tree/tree

<tree :data="tree" node-text="name" layoutType="circular">
</tree>

import {tree} from 'vued3tree'

export default {
  components: {
    tree
  },
  data() {
    return {
      tree: {
        name: "father",
        children:[{
          name: "son1",
          children:[ {name: "grandson"}, {name: "grandson2"}]
        },{
          name: "son2",
          children:[ {name: "grandson3"}, {name: "grandson4"}]
        }]
      }
    }
  }
}
  //...

• clicked

Sent when the node name is clicked

• expand

Sent when the node is clicked and the node children are expanded

• retract

Sent when the node is clicked and the node children are retracted

For all these events, the argument passed is {element, data} where element represents the node build by D3.js and data is the node raw data.

• zoom

Sent when the tree is zoomed. Argument: {transform} where transform is d3.zoom transform object

This component is responsive and will adjust to resizing. In order for this to work properly, you must define for this component or its parent weither:

• a height or a max-height
• or a width or a max-width.

Failing to do so may result in a component whose size that will keep increasing.

https://david-desmaisons.github.io/Vue.D3.tree/hierarchicalEdgeBundling

<hierarchical-edge-bundling identifier="id" :data="tree" :links="links" node-text="name"/>

import {hierarchicalEdgeBundling} from 'vued3tree'

export default {
  components: {
    hierarchicalEdgeBundling
  },
  data() {
    return {
      tree: {
        name: "father",
        children:[{
          name: "son1",
          children:[ {name: "grandson", id: 1}, {name: "grandson2", id: 2}]
        },{
          name: "son2",
          children:[ {name: "grandson3", id: 3}, {name: "grandson4", id: 4}]
        }]
      },
      links: [
        {source: 3, target: 1, type: 1},
        {source: 3, target: 4, type: 2}
      ],
      linkTypes: [
        {id: 1, name: 'depends', symmetric: true},
        {id: 2, name: 'implement', inName: 'implements', outName: 'is implemented by'},
        {id: 3, name: 'uses', inName: 'uses', outName: 'is used by'},
      ]
    }
  }
}
  //...

• mouseNodeOver

Sent when the node name is hovered by mouse

• mouseNodeOut

Sent when mouse leaves the node name

For these events, the argument passed is {element, data} where element represents the node build by D3.js and data is the node raw data.

• clickOutsideGraph

Sent when mouse is clicked outside any geometry or text of the hierarchical edge bundling

• nodesComputed

Sent when D3.js nodes are computed using data props. Called with D3.js hierarchy node

• highlightedNodeChanged

Sent when highlighted node has changed.

• highlightedNode

Highlighted node: when set to a node data, the corresponding node and its related links will be highlighted. If null standard display is showing.

This component is responsive and will adjust to resizing. In order for this to work properly, you must define for this component or its parent wether:

• a height or a max-height
• or a width or a max-width.

Failing to do so may result in a component whose size that will keep increasing.

• Available through:

 npm install vued3tree

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build