This is the minimal code that’s needed to display a graph on a web page
using yFiles for HTML.
First we make sure that there is a div
element on the HTML page in
the document. It will host the graph component visualization.
<div id="graphComponent"></div>
We also need to make sure that the div
actually has a positive size.
We can do this via CSS, but any technique that assigns a positive size to the
element would work:
#graphComponent {
width: 100%;
height: 100%;
background-color: white;
}
Now, in the code we can initialize the GraphComponent and wire it
up with the existing div
.
const graphComponent = new GraphComponent('#graphComponent')
And just to make this a little less boring and so that we can see something in the
view, we add a node with a label and center it in the view. This, of course, is
purely optional.
const node = graphComponent.graph.createNode()
graphComponent.graph.addLabel(node, 'y')
graphComponent.fitGraphBounds()
Note
|
The yFiles demo and tutorial applications use additional scripts and CSS
(demo-ui) to reduce the amount of boilerplate code that is needed to get a
good-looking demo app that shows the relevant features. All code samples
included in this distribution can be implemented using plain HTML and
TypeScript/JavaScript together with yFiles for HTML.
|
For a minimal example of using yFiles for HTML to display a graph on a web page, please
take a look at the Basic Demo Demo.