documentationfor yFiles for HTML 3.0.0.1
AdjacencyGraphBuilderCustomizing the Graph

Using Creators Without a Builder

You can use instances of NodeCreator<TDataItem>, EdgeCreator<TDataItem>, and LabelCreator<TDataItem> outside the context of graph builders. This allows you to use the various bindings and providers to create and style nodes, edges, and labels using data items, even without providing the data in consistent lists. It also allows you to use the creators in cases where the graph builders cannot be configured sufficiently.

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' })
})

You can use these creators 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)

You can use the creators' update methods to apply styles and labels to 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