Constructor
new Nodes(options)
Parameters
-
options
ObjectProperties
-
dom
String<optional>
window.documentDOM reference, required for testing
-
container
String<optional>
HTML identifier used by for d3
-
dom
Source
Methods
bindGraph(graph)
Binds this view to a graph so we can react to changes and re-render and adjust the graph as necessary.
Parameters
-
graph
Graphgraph to listen to for changes
Overrides
Source
hideUnrelated(node)
Visually hides elements unrelated to node parameter.
CSS styling is based on data-hidden attribute set on the DOM element.
Parameters
-
node
Node
Overrides
Source
onClick(n)
Event handler for browser click event. Handler is defined in render().
Parameters
-
n
Nodeclicked on node
Source
onMouseout(n)
Event handler for browser mouseout event. Handler is defined in render().
Parameters
-
n
ObjectNode
Source
onMouseover(n)
Event handler for browser mouseover event. Handler is defined in render().
Parameters
-
n
ObjectNode
Fires
Source
position()
Positions node <circle> at center
Overrides
Source
render(data)
Renders network graphs and passes hooks to d3.js's general update pattern via events. For more information on the general update pattern, see: https://bost.ocks.org/mike/join/
Parameters
-
data
ObjectNetwork data with
nodesattribute
Overrides
Source
resetStyles()
Reset all styles, e.g. colors and visibility
Overrides
Source
setRelationships(node)
Classifies elements based on relationship to node parameter.
CSS styling is based on data-rel attribute set on the DOM element.
Parameters
-
node
Node
Overrides
Source
Events
click
Note: this is a custom event and not a browser event.
Type
Example
nodes.on('click', (node) => {
console.log('User clicked on node ' + node.name)
})Listeners of this event
enter
An Array of enter Nodes, i.e. new nodes per d3.js general update pattern.
Type
-
Array
Listeners of this event
exit
An Array of exiting Nodes, i.e. nodes to be removed per d3.js general update pattern.
Type
-
Array
Listeners of this event
mouseout
Note: this is a custom event and not a browser event.
Type
Example
nodes.on('mouseout', (node) => {
console.log('mouse left node ' + node.name)
})Listeners of this event
mouseover
Note: this is a custom event and not a browser event.
Type
Example
nodes.on('mouseover', (node) => {
console.log('User hovered on node ' + node.name)
})Listeners of this event
update
An Array of combined existing and new Nodes, per d3.js general update pattern.
Type
-
Array