vnd

vue-network-d3

D3 Force-Directed Graph as Vue Component. D3 力导向图作为 Vue 组件。

Showing:

Popularity

Downloads/wk

13

GitHub Stars

33

Maintenance

Last Commit

2yrs ago

Contributors

2

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Vue Graph

Readme

vue-network-d3

中文文档

D3 Force-Directed Graph as Vue Component.

Demo

Install

npm install vue-network-d3 --save

Quick Start

<template>
  <div id="app">
    <network :nodeList="nodes" :linkList="links"></network>
  </div>
</template>

<script>
import Network from "vue-network-d3";

export default {
  name: "app",
  components: {
    Network
  },
  data() {
    return {
      nodes: [
        {"id": "Myriel", "group": 1},
        {"id": "Napoleon", "group": 1},
        {"id": "Labarre", "group": 2},
        {"id": "Valjean", "group": 2}
      ],
      links: [
        {"source": "Napoleon", "target": "Myriel", "value": 1},
        {"source": "Valjean", "target": "Labarre", "value": 1},
        {"source": "Napoleon", "target": "Valjean", "value": 2},
      ]
    };
  },
};
</script>

<style>
body {
  margin: 0;
}
</style>

Props

Overview

props: {
    nodeList: Array,
    linkList: Array,
    // node related:
    nodeSize: {
      type: Number,
      default: 14
    },
    nodeTextKey: {
      type: String,
      default: "id"
    },
    nodeTypeKey: {
      type: String,
      default: "group"
    },
    nodeTextFontSize: {
      type: Number,
      default: 14
    },
    bodyStrength: {
      type: Number,
      default: -150
    },
    // link related:
    linkWidth: {
      type: Number,
      default: 2
    },
    showLinkText: {
      type: Boolean,
      default: false
    },
    linkTextKey: {
      type: String,
      default: "value"
    },
    linkTypeKey: {
      type: String,
      default: "type"
    },
    linkTextFrontSize: {
      type: Number,
      default: 10
    },
    linkDistance: {
      type: Number,
      default: 50
    },
    // svg raleted:
    svgSize: {
      type: Object,
      default: () => {
        return {
          width: window.innerWidth,
          height: window.innerHeight
        };
      }
    },
    svgTheme: {
      type: String,
      default: "light" // dark or light
    },
    // others:
    highlightNodes: {
      type: Array,
      default: () => {
        return [];
      }
    }
}

Detailed Design

「⭐」​ means necessary

  • ⭐ ​nodeList: Array of Node Object which has

    • id: Number or String. Node id and also node name (can be changed by nodeTextKey)
    • group: Number or String. like node type (can be changed by nodeTypeKey)
  • linkList: Array of Link Object which has

    • source: Number or String. Id of source node.
    • target: Number or String. Id of target node.
    • value: Number or String. Link name (can be changed by linkTextKey)
  • nodeSize: Number.

  • nodeTextKey: String. Key of node text/name. The default value is 'id', you need to set it to 'name' if your node object is like:

    {
      id: 1010,
      name: 'Myriel'
    }
    
  • nodeTypeKey: String. Key of node type. The default value is 'group', you need to set it to 'type' if your node object is like:

    {
      id: 'Myriel',
      type: 1
    }
    
  • nodeTextFontSize: Number.

  • linkWidth: Number.

  • showLinkText: Boolean. Show link text or not. Suggest keeping it false, link text will show when you hover on the link.

  • linkTextKey: String. Key of link text/name. The default value is 'value', you need to set it to 'name' If your link object is like:

    {
      source: 'Napoleon',
      target: "Myriel", 
      name: 'friend'
    }
    
  • linkTypeKey: String. Key of link type. The default value is 'type'.

  • linkTextFrontSize: Number.

  • linkDistance: Number.

  • svgSize: Object which has

    • width: Number.
    • height: Number
  • svgTheme: String. 'light' or 'dark', 'light' is default.

  • bodyStrength: Number. A positive value causes nodes to attract each other, similar to gravity, while a negative value causes nodes to repel each other, similar to electrostatic charge.

  • highlightNodes: Array of node id. Stroke of nodes turn yellow.

Events

  • clickNode: emits (event, node-object)
  • clickLink: emits (event, link-object)
  • hoverNode: emits (event, node-object)
  • hoverLink: emits (event, link-object)

Classes

  • .element: all nodes and links
  • .node: all nodes
  • .link: all links
  • .[type]: nodes where node[nodeTypeKey] == type, links where link[linkTypeKey] == type
  • .selected: selected nodes (clicked node with its first layer nodes)

Reference

Repo

TODO

  • Docs: props and events
  • Learn Vue-CLI more
  • Fix: node's style when hover
  • CI

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial