Yes, it does render, but the second one is outside the viewport.
Because you did not specify a position for either Node, the default Diagram.layout (an instance of Layout) had to give each of your Nodes a real Node.position. In this case it puts both nodes next to each other in a row. The first one you see, but the second one is outside of the viewport on the right.
If you hadn’t disabled horizontal scrolling, you would have seen the scrollbar showing that the viewport was only showing half of the diagram. But even with the scrollbars hidden, you could zoom out to see both Nodes.
You need to specify the Node.position for each of your nodes. From your description in this case it sounds as if you want to set both positions to be new go.Point(0, 0)
. Alternatively you could use the same Shape.geometryString and position one node at (0, 50) and the other at (0, 100).
Or for yet another approach, you could have done:
myDiagram.add(
$(go.Node,
{ position: new go.Point(0, 0) },
$(go.Shape,
{
isGeometryPositioned: true,
geometryString: "M0 50 H" + myDiagram.viewportBounds.width + " M0 100 H" + myDiagram.viewportBounds.width,
stroke: "lightgreen"
})));
or
myDiagram.add(
$(go.Node,
{ position: new go.Point(0, 50) },
$(go.Shape,
{
isGeometryPositioned: true,
geometryString: "M0 0 H" + myDiagram.viewportBounds.width + " M0 50 H" + myDiagram.viewportBounds.width,
stroke: "lightgreen"
})));
Or any number of other ways of achieving the same goal, with different trade-offs regarding what you allow to happen.
The important point to learn from this is that each Shape has its own coordinate system used by its Geometry, as does each Panel (in this case the Node) for all of its elements (in this case just the one Shape), as does the whole document which determines the position of each Node.
Another point to consider is what should happen when the viewport changes. If the HTML DIV element changes size, or if the user zooms in or out, the Diagram.viewportBounds will change. Therefore you’ll need to implement a “ViewportBoundsChanged” DiagramEvent listener to update your two Shape geometries.
You might be interested in this sample: Absolute positioning within the viewport. Or in some variation of what that sample does.