Force Graph

Force Directed Graph

Note: The Force Directed Graph exports as D3ForceGraph.

Sections

• Sample
• Properties
  • dataModel
    • Object Keys
  • xaxisLabel
  • yaxisLabel

Sample

<template>
  <div>
    <force-graph
      :dataModel="forceDirectedGraphData"
      title="Title"
    />
  </div>
</template>

<script>

import {D3ForceGraph} from 'jscatalyst'
export default{
  data(){
    return{
        forceGraphData = {}
    }
  },
  components:{
    forceGraph: D3ForceGraph
  }
}

</script>

Properties

dataModel

Type: Object

The dataModel for the D3ForceGraph is empty by default. Sample Data:

forceDirectedGraphData = {
  nodes: [
    { id: "Myriel", group: 9 },
    { id: "Napoleon", group: 1 },
    { id: "Mlle.Baptistine", group: 1 },
    { id: "Mme.Magloire", group: 1 },
    { id: "CountessdeLo", group: 2 },
    { id: "Geborand", group: 1 },
    { id: "Champtercier", group: 3 },
    { id: "Cravatte", group: 1 },
    { id: "Count", group: 4 },
    { id: "OldMan", group: 1 }
  ],
  links: [
    { source: "Napoleon", target: "Myriel", value: 1 },
    { source: "CountessdeLo", target: "Count", value: 18 },
    { source: "OldMan", target: "Cravette", value: 100 },
    { source: "Geborand", target: "Myriel", value: 15 }
  ]
};

dataModel Object Keys

• nodes

  Type: Array

  Takes an array of objects representing the nodes of the graph.

  • id

    Type: String

    The name of the node. Used to produce links between this and other nodes.

  • group

    type: Number

    The group to which a node belongs determines the node's color and rendered grouping

• links

  Type: Array

  Takes an array of objects that defines the rended connections between two specific nodes.

  • source

    Type: String

    The id of the first node in this link. ID must match EXACTLY and existing node id.

  • target

    Type: String

    The id of the second node in this link. ID must match EXACTLY and existing node id.

  • value

    Type: Number

    Visually alters the thickness of the rendered link.

<--- Back to Top