# vue-d3-netgraph

> Vue component to graph networks using d3-force with additional features

Latest version **0.1.0** (published 2019-11-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-d3-netgraph
pnpm add vue-d3-netgraph
yarn add vue-d3-netgraph
bun add vue-d3-netgraph
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2019-11-05 |
| First published | 2019-11-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 2.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | TJ Epperson |
| Maintainers | arcaster42 |
| Keywords | vue, vuejs, d3, network, d3-force, graph, component |

## Links

- npm: https://www.npmjs.com/package/vue-d3-netgraph
- Repository: https://github.com/arcaster42/vue-d3-network-plus
- Homepage: https://github.com/arcaster42/vue-d3-network-plus#readme
- Issues: https://github.com/arcaster/vue-d3-network-plus/issues
- npm.io page: https://npm.io/package/vue-d3-netgraph

## Dependencies (1)

- [d3-force](https://npm.io/package/d3-force.md) ^1.0.6

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2019-11-05

## README

[![GitHub issues](https://img.shields.io/github/issues/arcaster42/vue-d3-network-plus.svg)](https://github.com/emiliorizzo/vue-d3-network/issues) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/arcaster42/vue-d3-network-plus/master/LICENSE) [![npm](https://img.shields.io/npm/v/vue-d3-network.svg)](https://www.npmjs.com/package/vue-d3-network-plus)

# vue-d3-network-plus

> This is a continuation of work originally done by [emiliorizzo](https://github.com/emiliorizzo) forked from [his repository](https://github.com/emiliorizzo/vue-d3-network). As the repository had little changes and stale PR's, this project was started to continue the work and provide a more active development. All credit goes to the original author for the foundational work. 

![vue d3 network](vue-d3-network.png)

## 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

``` bash
npm install vue-d3-network-plus --save

```

## Usage

- [fiddle](https://jsfiddle.net/emii/ru24unsz/)
- [codePen](https://codepen.io/emilio/pen/mwYpbj)

```xml
<d3-network :net-nodes="nodes" :net-links="links" :options="options" />

```

``` javascript  
import D3Network from 'vue-d3-network-plus'
  components: {
    D3Network
  }
```

``` html

<style src="vue-d3-network-plus/dist/vue-d3-network.css"></style>

```

  Or: *import source component from:* 'vue-d3-network-plus/src/vue-d3-network.vue'
  *And install devDependencies.* (d3-force, stylus and pug)
  See: [package.json](https://github.com/arcaster42/vue-d3-network-plus/blob/master/package.json))

## Props

**net-nodes**: Array of [node objects](#node-object)

**net-links**: Array of [link objects](#link-object)

**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)**
- **node-hover**:  *fired when mouseover 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](https://github.com/emiliorizzo/vue-d3-network/blob/master/src/lib/canvasStyles.js)

## TODO

- [x]  Touch support
- [ ]   Optimization
- [ ]   Zoom
- [x]  Canvas Render
- [x]  Nodes sprites

## More Examples

- [svg marks on links](https://codepen.io/emilio/pen/QOaQjP)
- [Links labels](https://codepen.io/emilio/pen/ZampZb)
- [No-link forces](https://jsfiddle.net/emii/4odfweq9)
- [Change node icon on the fly](https://codepen.io/emilio/pen/YOeaWN)

---
_Source: https://npm.io/package/vue-d3-netgraph · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._