vue3-d3-network
v1.0.2
Published
Vue 3 component to graph networks using d3-force
Downloads
119
Maintainers
Readme
vue-d3-network on Vue 3 (alpha)
Vue component to graph networks using d3-force
Warning
This version has been thoroughly tested and is in active use in a production env of a Nuxt 3 project. BUT only the SVG graph with touch support & nodes selection. The screenshot feature has not been tested. Neither the canvas. Nor any of the tests have been updated. Linter fails (event though it shouldn't) - but again, no time has been spent on it. This is the result of us having to ship Nuxt 3 upgrade on a deadline.
Demo
Features
- SVG render
- Canvas render
- Links and nodes selection
- svg <-> canvas shared styles via css
- Screenshots, export as svg or png (svg renderer), export as png (canvas renderer)
- Touch support
Installation
yarn add vue3-d3-network
Usage
<d3-network :net-nodes="nodes" :net-links="links" :options="options" />
import D3Network from 'vue-d3-network'
components: {
D3Network
}
<style src="vue-d3-network/dist/vue-d3-network.css"></style>
Or: import source component from: 'vue-d3-network/src/vue-d3-network.vue' And install devDependencies. (d3-force, stylus and pug) See: package.json)
Props
net-nodes: Array of node objects
net-links: Array of link objects
selection : Object, links and nodes selected
- links: Object with node.ids as keys, node objects as values
- nodes: Object with link.ids as keys, links objects as values
nodeSym: String, node sprite svg doc
nodeCb: Function(node) -> node, node formatter
linkCb: Function(link) -> link, node link formatter
simCb: Function(sim) -> sim, d3 simulation formatter
customForces: Object: { [d3Function]:args }
options:
canvas: Boolean, render as canvas, false = svg
size: Object, graph size. Default: container size
- w: Number
- h: Number
offset: Object, graph center offset
- x: Number
- y: Number
force: Number
forces Object:
- Center: Boolean, use d3.forceCenter
- X: strength, use d3.forceX
- Y: strength, use d3.forceY
- ManyBody: Boolean, use d3.forceManyBody, takes the negative value of 'force' option
- Link: Boolean, use d3.forceLink
nodeSize: Number, node radius | size in px
linkWidth: Number, link thickness in px
nodeLabels: Boolean, show nodes names
linkLabels: Boolean, show links names
fontSize: Number, for node labels, px
strLinks: Boolean, draw links as rect lines
resizeListener:Boolean, defaults: true ,add listener to window.resize event
noNodes: Boolean, no render nodes
canvasStyles: Object
Events
- node-click: fired when click on node, emits (event,node-object)
- link-click: fired when click on link, emits (event, link-object)
- screen-shot: fired when screenshot creation is done, emits (error)
Methods
- screenShot (name, bgColor, toSVG, svgAllCss), all arguments are optional
- name: file name
- bgColor: CSS color, png background color
- toSVG: Boolean, (svg renderer) true: export as svg, false : export as png
- svgAllCss: Boolean (svg renderer) true: include all styles in svg false: include only matched styles. This option is useful, for example to include hover actions on exported svg file
Node object
- id: node id. If not provided uses array index
- name: node name. If not provided uses: 'node [node_id]'
- _color: node color, e.g. red, #aa00bb,
- _cssClass: node css class name
- _labelClass: node label css class name
- svgSym: node icon, svg document (only works in svg renderer)
- _size : node size (svg renderer only)
- _width: node width (svg renderer only)
- _height: node height (svg renderer only)
- _svgAttrs: Object, svg node attributes
Link Object
- id: link id. If not provided uses array index
- name: node name. If not provided uses: 'link [link_id]'
- tid: id of target node
- sid: id of source node
- _color: link color, e.g. red, #aa00bb,
- _svgAttrs: Object, svg line attributes
Css style and canvas style
SVG css classes:
- .node: nodes symbol
- .link: link line
- .node-label: nodes names
- .node .selected: node selected
- .link .selected link selected
- .node .pinned: node pinned
To use this css styles in canvas we create 'ghosts' svg elements to pick up values from computed css properties. If you want, you can stylize the canvas elements directly, setting: options.canvasStyles, but these styles will not be applied to the svg graph.
see: src/canvasStyles.js
TODO
- [x] Touch support
- [ ] Optimization
- [ ] Zoom (though there's an excellent fork implementing this)
- [x] Canvas Render
- [x] Nodes sprites