d3plus-network
Javascript network visualizations built upon d3 modules.
Installing
If you use NPM, npm install d3plus-network
. Otherwise, download the latest release. The released bundle supports AMD, CommonJS, and vanilla environments. Create a custom bundle using Rollup or your preferred bundler. You can also load directly from d3plus.org:
<script src="https://d3plus.org/js/d3plus-network.v0.1.full.min.js"></script>
Getting Started
Given an array of nodes and an array of links, d3plus-network can create simple network visualization based on 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
Network ⇐ Viz
Kind: global class
Extends: Viz
new Network()
Creates an x/y plot based on an array of data.
Network.links([links]) ↩︎
If links is specified, sets the links array to the specified array and returns the current class instance. If links is not specified, returns the current links array.
Kind: static method of Network
Chainable
Param | Type | Default |
---|
[links] | Array | [] |
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.
Kind: static method of Network
Chainable
Param | Type |
---|
[value] | String | function | Array |
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.
Kind: static method of Network
Chainable
Param | Type | Default |
---|
[nodes] | Array | [] |
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.
Kind: static method of Network
Chainable
Param | Type |
---|
[value] | function | String |
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.
Kind: static method of Network
Chainable
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.
Kind: static method of Network
Chainable
Param | Type | Default |
---|
[value] | Number | 5 |
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.
Kind: static method of Network
Chainable
Param | Type | Default |
---|
[value] | String | "sqrt" |
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.
Kind: static method of Network
Chainable
Param | Type |
---|
[value] | function | String |
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.
Kind: static method of Network
Chainable
Param | Type |
---|
[value] | function | String |
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.
Kind: static method of Network
Chainable
Param | Type | Default |
---|
[value] | Boolean | true |
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.
Kind: static method of Network
Chainable
Param | Type | Default |
---|
[value] | Number | 16 |
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.
Kind: static method of Network
Chainable
Param | Type | Default |
---|
[value] | Boolean | true |
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.
Kind: static method of Network
Chainable
Param | Type | Default |
---|
[value] | Boolean | true |
Documentation generated on Tue, 20 Dec 2016 20:28:55 GMT