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
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:
- The index of the node in the nodes array (as in this example).
- The actual node Object itself.
- 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 <>
This is a global class, and extends all of the methods and functionality of Viz
.
# 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]) <>
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:
- The index of the node in the nodes array (as in this example).
- The actual node Object itself.
- A String value matching the
id
of the node.
This is a static method of Network
, and is chainable with other methods of this Class.
# 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]) <>
If nodes is specified, sets the nodes array to the specified array and returns the current class instance. If nodes is not specified, returns the current nodes array.
This is a static method of Network
, and is chainable with other methods of this Class.
# 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.
# Network.zoom([value]) <>
If value is specified, toggles overall zooming to the specified boolean and returns the current class instance. If value is not specified, returns the current overall zooming value.
This is a static method of Network
, and is chainable with other methods of this Class.
# Network.zoomMax([value]) <>
If value is specified, sets the max zoom scale to the specified number and returns the current class instance. If value is not specified, returns the current max zoom scale.
This is a static method of Network
, and is chainable with other methods of this Class.
# Network.zoomPan([value]) <>
If value is specified, toggles panning to the specified boolean and returns the current class instance. If value is not specified, returns the current panning value.
This is a static method of Network
, and is chainable with other methods of this Class.
# Network.zoomScroll([value]) <>
If value is specified, toggles scroll zooming to the specified boolean and returns the current class instance. If value is not specified, returns the current scroll zooming value.
This is a static method of Network
, and is chainable with other methods of this Class.
Documentation generated on Thu, 20 Jul 2017 12:20:40 GMT