d3plus-network

d3plus-network

Javascript network visualizations built upon d3 modules.

Installing

If you use NPM, run npm install d3plus-network --save. Otherwise, download the latest release. The released bundle supports AMD, CommonJS, and vanilla environments. You can also load directly from d3plus.org:

<script src="https://d3plus.org/js/d3plus-network.v0.1.full.min.js"></script>

Simple Network Graph

Given an array of nodes and an array of links, d3plus-network creates a simple network visualization based on the supplied x and y coordinates.

var nodes = [
  {id: "alpha",   x: 1,   y: 1},
  {id: "beta",    x: 2,   y: 1},
  {id: "gamma",   x: 1,   y: 2},
  {id: "epsilon", x: 3,   y: 2},
  {id: "zeta",    x: 2.5, y: 1.5},
  {id: "theta",   x: 2,   y: 2}
];

The source and target keys in each link need to map to the nodes in one of three ways:

1. The index of the node in the nodes array (as in this example).
2. The actual node Object itself.
3. A String value matching the id of the node.

var links = [
  {source: 0, target: 1},
  {source: 0, target: 2},
  {source: 3, target: 4},
  {source: 3, target: 5},
  {source: 5, target: 0}
];

Finally, these 2 variables simply need to be passed to a new Network class:

new d3plus.Network()
  .links(links)
  .nodes(nodes)
  .render();

Click here to view this example live on the web.

API Reference

Classes

• Network

---

Network <>

This is a global class, and extends all of the methods and functionality of Viz.

• Network ⇐ Viz
  • new Network()
  • .links(links, [formatter]) ↩︎
  • .nodeGroupBy([value]) ↩︎
  • .nodes(nodes, [formatter]) ↩︎
  • .size([value]) ↩︎
  • .sizeMax([value]) ↩︎
  • .sizeMin([value]) ↩︎
  • .sizeScale([value]) ↩︎
  • .x([value]) ↩︎
  • .y([value]) ↩︎

# new Network()

Creates a network visualization based on a defined set of nodes and edges. Click here for help getting started using the Network class.

# Network.links(links, [formatter]) <>

A predefined Array of edges that connect each object passed to the node method. The source and target keys in each link need to map to the nodes in one of three ways:

1. The index of the node in the nodes array (as in this example).
2. The actual node Object itself.
3. A String value matching the id of the node.

The value passed should either be an Array of data or a String representing a filepath or URL to be loaded. An optional formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function should return the final links Array.

This is a static method of Network, and is chainable with other methods of this Class.

Param	Type	Description
links	Array | String	= []
[formatter]	function

# Network.nodeGroupBy([value]) <>

If value is specified, sets the node group accessor(s) to the specified string, function, or array of values and returns the current class instance. This method overrides the default .groupBy() function from being used with the data passed to .nodes(). If value is not specified, returns the current node group accessor.

This is a static method of Network, and is chainable with other methods of this Class.

# Network.nodes(nodes, [formatter]) <>

The list of nodes to be used for drawing the network. The value passed should either be an Array of data or a String representing a filepath or URL to be loaded.

Additionally, a custom formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function should return the final node Array.

This is a static method of Network, and is chainable with other methods of this Class.

Param	Type	Description
nodes	Array | String	= []
[formatter]	function

# Network.size([value]) <>

If value is specified, sets the size accessor to the specified function or data key and returns the current class instance. If value is not specified, returns the current size accessor.

This is a static method of Network, and is chainable with other methods of this Class.

# Network.sizeMax([value]) <>

If value is specified, sets the size scale maximum to the specified number and returns the current class instance. If value is not specified, returns the current size scale maximum. By default, the maximum size is determined by half the distance of the two closest nodes.

This is a static method of Network, and is chainable with other methods of this Class.

# Network.sizeMin([value]) <>

If value is specified, sets the size scale minimum to the specified number and returns the current class instance. If value is not specified, returns the current size scale minimum.

This is a static method of Network, and is chainable with other methods of this Class.

# Network.sizeScale([value]) <>

If value is specified, sets the size scale to the specified string and returns the current class instance. If value is not specified, returns the current size scale.

This is a static method of Network, and is chainable with other methods of this Class.

# Network.x([value]) <>

If value is specified, sets the x accessor to the specified function or string matching a key in the data and returns the current class instance. The data passed to .data() takes priority over the .nodes() data array. If value is not specified, returns the current x accessor. By default, the x and y positions are determined dynamically based on default force layout properties.

This is a static method of Network, and is chainable with other methods of this Class.

# Network.y([value]) <>

If value is specified, sets the y accessor to the specified function or string matching a key in the data and returns the current class instance. The data passed to .data() takes priority over the .nodes() data array. If value is not specified, returns the current y accessor. By default, the x and y positions are determined dynamically based on default force layout properties.

This is a static method of Network, and is chainable with other methods of this Class.

---

_{Documentation generated on Mon, 23 Oct 2017 19:26:10 GMT}