Dear Mr.Walter,
Greetings! i want to create a chart like that and make the center circle to be fixed while scrolling. right and left side nodes should scroll vertically.
as you said, i have implemented “ViewportBoundsChanged” DiagramEvent listener, then links with arrows are hiding as below pic.

please help me to solve this… i used below code to create this…
function init() {
var $ = go.GraphObject.make;
var myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
});
//make port
function makePort(name, spot, output, input) {
// the port is basically just a small circle that has a white stroke when it is made visible
return $(go.Shape, "Circle",
{
fill: null,
stroke: null, // this is changed to "white" in the showPorts function
desiredSize: new go.Size(8, 8),
alignment: spot, alignmentFocus: spot, // align the port on the main Shape
portId: name, // declare this object to be a "port"
//fromSpot: spot,
//toSpot: spot, // declare where links may connect at this port
fromLinkable: output, toLinkable: input, // declare whether the user may draw links to/from here
cursor: "pointer" // show a different cursor to indicate potential link point
});
}
myDiagram.nodeTemplateMap.add("circlebox",
$(go.Part,
{layerName:"Grid",_viewPosition: new go.Point(400,250)},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape,"Circle"),
makePort("L", go.Spot.MiddleLeft, false, false),
makePort("R", go.Spot.MiddleRight, false, false)
))
myDiagram.addDiagramListener("ViewportBoundsChanged", function(e) {
e.diagram.commit(function(dia) {
// only iterates through simple Parts in the diagram, not Nodes or Links
dia.parts.each(function(part) {
// and only on those that have the "_viewPosition" property set to a Point
if (part._viewPosition) {
part.position = dia.transformViewToDoc(part._viewPosition);
part.scale = 1/dia.scale;
}
})
}, "fix Parts");
});
// the template we defined earlier
myDiagram.nodeTemplate =
$(go.Node, "Horizontal",
{ background: "#44CCFF" },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// $(go.Picture,
// { margin: 10, width: 50, height: 50, background: "red" },
// new go.Binding("source")),
$(go.TextBlock, "Default Text",
{ margin: 12, stroke: "white", font: "bold 16px sans-serif" },
new go.Binding("text", "name")),
makePort("L", go.Spot.Left, false, false)
//makePort("R", go.Spot.Right, false, false)
);
var model = $(go.TreeModel);
model.nodeDataArray =
[ // the "key" and "parent" property names are required,
// but you can add whatever data properties you need for your app
{ key: "1", category:"circlebox", name: "1Don Meow",loc: go.Point.stringify({ x: 400, y: 250 })},
{ key: "2", name: "2Demeter",loc: go.Point.stringify({ x: 200, y: 250 }), parent: "1"},
{ key: "3", name: "3Copricat",loc: go.Point.stringify({ x: 600, y: 250 }), parent: "1"},
{ key: "4", name: "4Don Meow",loc: go.Point.stringify({ x: 200, y: 450 }), parent: "1"},
{ key: "5", name: "5Copricat",loc: go.Point.stringify({ x: 600, y: 450 }), parent: "1"},
{ key: "6", name: "6Don Meow",loc: go.Point.stringify({ x: 200, y: 50 }), parent: "1"},
{ key: "7", name: "7Copricat",loc: go.Point.stringify({ x: 600, y: 50 }), parent: "1"},
{ key: "8", name: "8Don Meow",loc: go.Point.stringify({ x: 200, y: -150 }), parent: "1"},
{ key: "9", name: "9Copricat",loc: go.Point.stringify({ x: 600, y: -150 }), parent: "1"},
{ key: "10", name: "10Don Meow",loc: go.Point.stringify({ x: 200, y: 650 }), parent: "1"},
{ key: "11", name: "11Copricat",loc: go.Point.stringify({ x: 600, y: 650 }), parent: "1"},
//{ key: "4", parent: "3", name: "4Jellylorum" },
// { key: "5", parent: "3", name: "5Alonzo" },
// { key: "6", parent: "2", name: "6Munkustrap" }
];
myDiagram.model = model;
myDiagram.initialContentAlignment = go.Spot.Center;
}
pls help me to solve this…
thanks and Regards,
Syed Abdul Rahim