基于vue的组织架构树组件

Vue.D3.tree (Vue.D3.tree)

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

更新documentationVue组件以显示基于D3.js布局的图形。

树 (Tree)

用法 (Usage)

<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"}]}]}}}
}//...

物产 (Properties)

大事记 (Events)

• clicked

  clicked

Sent when the node name is clicked

单击节点名称时发送

• expand

  expand

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

单击节点并展开子节点时发送

• retract

  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.

对于所有这些事件，传递的参数为{element, data} ，其中element表示由D3.js构建的节点，而data是节点原始数据。

• zoom

  zoom

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

缩放树时发送。 参数： {transform}其中transform是d3.zoom变换对象

方法 (methods)

分层边缘捆绑 (Hierarchical Edge Bundling)

用法 (Usage)

<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'},]}}
}//...

物产 (Properties)

大事记 (Events)

• mouseNodeOver

  mouseNodeOver

Sent when the node name is hovered by mouse

鼠标悬停节点名称时发送

• mouseNodeOut

  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.

对于这些事件，传递的参数为{element, data} ，其中element表示由D3.js构建的节点，而data是节点原始数据。

• clickOutsideGraph

  clickOutsideGraph

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

在层次边缘绑定的任何几何图形或文本之外单击鼠标时发送

• nodesComputed

  nodesComputed

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

使用data道具计算D3.js节点时发送。 用D3.js层次结构节点调用

• highlightedNodeChanged

  highlightedNodeChanged

Sent when highlighted node has changed.

当突出显示的节点已更改时发送。

数据 (data)

• highlightedNode

  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.

高亮显示的节点：当设置为节点数据时，相应的节点及其相关链接将被高亮显示。 如果为空，则显示标准显示。

安装 (Installation)

• Available through:

  可通过以下方式获得：

npm install vued3tree

构建设置 (Build Setup)

# install dependencies
npm install# serve with hot reload at localhost:8080
npm run dev# build for production with minification
npm run build

翻译自: https://vuejsexamples.com/vue-component-to-display-tree-based-on-d3-js-layout/

基于vue的组织架构树组件