Code Monkey home page Code Monkey logo

vue-d3-network-graph's Introduction

vue-d3-network-graph / Exports

vue-d3-network-graph

inspired by https://github.com/emiliorizzo/vue-d3-network

Key features

Installation

npm install vue-d3-network-graph

Utilisation

<template>
  <div id="app">
    <D3NetworkGraph :nodes="nodes" :links="links" />
  </div>
</template>
<script lang="ts">
  import D3NetworkGraph from "vue-d3-network-graph";
  import "vue-d3-network-graph/dist/style.css";

  const nodes = ref([
    { id: 1, name: "my awesome node 1", innerSVG: database },
    { id: 2, name: "my node 2", innerSVG: bloc },
    { id: 3, name: "orange node" },
    { id: 4, name: "blue node" },
    { id: 5, name: "G1 - 1", group: 1 },
    { id: 6, name: "G1 - 2", group: 1 },
    { id: 7, name: "G1 - 3", group: 1 },
    { id: 8, name: "G2 - 1", group: 2 },
    { id: 9, name: "G2 - 2", group: 2 },
    { id: 10, name: "G2 - 3", group: 2 },
    { id: 11 },
    { id: 12 },
    { id: 13 },
    { id: 14 },
  ]);
  const links = ref([
    { source: 2, target: 1, name: "Utilise" },
    { source: 4, target: 3, name: "Utilise" },
    { source: 4, target: 2, name: "Utilise" },
    { source: 4, target: 9, name: "Utilise" },
    { source: 5, target: 6, name: "Utilise" },
    { source: 7, target: 8, name: "Utilise" },
    { source: 5, target: 8, name: "Utilise" },
    { source: 3, target: 8, name: "Utilise" },
    { source: 7, target: 9, name: "Utilise" },
    { source: 3, target: 9 },
    { source: 10, target: 6 },
    { source: 11, target: 6 },
    { source: 12, target: 6 },
    { source: 13, target: 6 },
    { source: 14, target: 6 },
  ]);
</script>

API

See API

D3NetworkGraph Component

props

Name Type Default Description
nodes Array<D3Node> [] Array of nodes
links Array<D3Link> [] Array of links
options? D3Options undefined Links, nodes and simulation Options

events

Name Type Description
'node-click' function Callback function called when a node is clicked
'link-click' function Callback function called when a node is mouseovered

TODO :

  • Zoom
  • Children nodes
  • Selection
  • Custom forces
  • Better theming support
  • (Canvas rendering ?)
  • (Remove vueuse dependency ?)

Issues and PR are welcome !

vue-d3-network-graph's People

Contributors

deka avatar dependabot[bot] avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.