Link Search Menu Expand Document (external link)
UIFactory

network-chart

<network-chart> renders a network chart (a force-directed layout) with nodes connected by links.

This is useful when creating force directed layouts like:

Usage

Add this code anywhere in your HTML page:

<script src="https://cdn.jsdelivr.net/npm/uifactory@1.24.0/dist/uifactory.min.js" import="@network-chart"></script>
<script>
  /* exported nodes, links */
  var nodes = [
    { id: 0 },
    { id: 1 },
    { id: 2 },
    { id: 3 },
  ]
  var links = [
    { source: 0, target: 1 },
    { source: 1, target: 2 },
    { source: 2, target: 0 },
    { source: 0, target: 3 },
  ]
</script>
<network-chart data:js="{nodes: nodes, links: links}">
  Loading network...
</network-chart>

This renders the following output:

Network chart example

Properties

<network-chart> has the following properties:

  • type: string. “node-link”
  • data: js=”{}”
  • width: number (optional). Chart width in pixels. Default: 500
  • height: number (optional). Chart height in pixels. Default: 500
  • collide: boolean (optional). If true, don’t allow nodes to overlap. If set to a number, provide a padding between nodes. Default: false
  • drag-action: string (optional). Default: pin
  • node: boolean (optional). Show nodes? node="false" hides all nodes. Default: true
  • node-charge: number (optional). How strongly nodes push each other. -ve values make nodes pull each other. Default: +30
  • link: boolean (optional). Show links? links="false" hides all links. Default: true
  • link-id: string (optional). TODO: document this. Default: None
  • label: boolean (optional). Show labels? labels="false" hides all labels. Default: true

It also has properties that change the properties of nodes, links and labels:

  • node-size: number (optional). Radius of node circles in pixels. Default: 5
  • node-fill: color (optional). Color of the node circles. Default: red
  • node-opacity: number (optional). Use 0.0 for transparent nodes, 1.0 for opaque nodes. Default: 1
  • node-stroke: color (optional). Outline color of the node circles. Default: #fff
  • node-stroke-width: number (optional). Thickness of the node circles in pixels. Default: 1
  • link-stroke: color (optional). Line color of the links. Default: #999
  • link-stroke-width: number (optional). Thickness of the links in pixels. Default: 1
  • link-opacity: number (optional). Use 0.0 for transparent links, 1.0 for opaque links. Default: 0.6
  • link-distance: number (optional). Default distance between nodes. Default: 30
  • label-text: string (optional). Text to show in label. Default: None
  • label-text-anchor: string (optional). start for left aligned, end for right-aligned, middle for centered. Default: middle
  • label-dominant-baseline: string (optional). hanging for top aligned, alphabetic for bottom-aligned, middle for centered. Default: middle
  • label-font-family: string (optional). Label font name, e.g. Roboto. Default: sans-serif
  • label-font-size: number (optional). Label font size in pixels. Default: 12
  • label-font-weight: string (optional). Label font weight, e.g. “bold” or “”. Default: bold
  • label-fill: color (optional). Label font color. Default: black
  • label-dx: number (optional). Shift label right in pixels. -ve values to shift left. Default: 0
  • label-dy: number (optional). Shift label down in pixels. -ve values to shift up. Default: 0

These node/link/label properties can be functions that accept the node/link/node data object. For example:

  • node-fill:js="d => d.age < 18 ? 'red' : 'green'" fills nodes red if .age is under 18, else green
  • link-opacity:js="d => d.count > 4 ? 1 : 0" makes links with .count under 4 transparent, rest are shown

Changing any property re-renders the component. For example:

// Re-render the network with green nodes
document.querySelector('network-chart').nodeFill = 'green'

Examples

Loading network... Loading network...