documentationfor yFiles for HTML 2.6
AdjacencyGraphBuilderCustomizing the Graph

Using the Creators without a Builder

Instances of NodeCreator<TDataItem>, EdgeCreator<TDataItem>, and LabelCreator<TDataItem> can be used outside the context of graph builders. This enables developers to use the various bindings and providers to create and style nodes, edges, and labels using data items without the need to provide the data in consistent lists. It also allows for using the creators in cases where the graph builders cannot be sufficiently configured.

Configuring node and edge creators outside a GraphBuilder context
// Set up a node Creator
const nodeCreator = new NodeCreator()
nodeCreator.defaults.shareStyleInstance = false
nodeCreator.defaults.style = new ShapeNodeStyle({
  stroke: 'darkorange',
  fill: 'lightyellow',
  shape: 'round-rectangle'
})
nodeCreator.styleBindings.addBinding('stroke', (employee) =>
  employee.position.includes('Chief') ? 'darkred' : 'darkorange'
)
nodeCreator.styleBindings.addBinding('shape', (employee) => (employee.freelancer ? 'hexagon' : 'round-rectangle'))
nodeCreator.createLabelBinding((item) => item.name)

// Set up an EdgeCreator
const edgeCreator = new EdgeCreator({
  style: (relationship) =>
    relationship.Type == 'Assistant'
      ? new PolylineEdgeStyle({ stroke: 'lightgray' })
      : new PolylineEdgeStyle({ stroke: 'black' })
})

// Set up a node Creator
const nodeCreator = new NodeCreator<Employee>()
nodeCreator.defaults.shareStyleInstance = false
nodeCreator.defaults.style = new ShapeNodeStyle({
  stroke: 'darkorange',
  fill: 'lightyellow',
  shape: 'round-rectangle'
})
nodeCreator.styleBindings.addBinding('stroke', (employee) =>
  employee.position.includes('Chief') ? 'darkred' : 'darkorange'
)
nodeCreator.styleBindings.addBinding('shape', (employee) => (employee.freelancer ? 'hexagon' : 'round-rectangle'))
nodeCreator.createLabelBinding((item) => item.name)

// Set up an EdgeCreator
const edgeCreator = new EdgeCreator<Relationship>({
  style: (relationship) =>
    relationship.Type == 'Assistant'
      ? new PolylineEdgeStyle({ stroke: 'lightgray' })
      : new PolylineEdgeStyle({ stroke: 'black' })
})

These creators can be used to create nodes and edges with styles, positions, and labels according to the provided node and edge data.

// Create the elements
const node1 = nodeCreator.createNode(graph, null, data1)
const node2 = nodeCreator.createNode(graph, null, data2)
const edge = edgeCreator.createEdge(graph, node1, node2, relation)

The creators' update methods can be used to apply styles and labels on existing nodes and edges. The updated items do not need to have been created with the creators.

// Use the configured node and edge creators
// to apply styles and labels to existing items

nodeCreator.updateNode(graph, node1, null, data1)
nodeCreator.updateNode(graph, node2, null, data2)
edgeCreator.updateEdge(graph, edge, relation)
AdjacencyGraphBuilderCustomizing the Graph