Skip to content
This repository has been archived by the owner on Dec 8, 2021. It is now read-only.
/ vue-network-d3 Public archive

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

License

Notifications You must be signed in to change notification settings

yuleicul/vue-network-d3

Repository files navigation

中文文档

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

「:star:」​ 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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published