问题：节点数量太多，导致一开始画布上只显示出冰山一角（即节点树的左上角） 需求：需要在页面一开始时，将一个节点作为中心点，可以使用
diagram.commandHandler.scrollToPart方法重置中心点
主要代码部分
//加上定时器延时一下，防止操作过早，节点还未渲染而不生效
setTimeout(()=>{
// ROOT是节点的key，想让哪个节点当中心点，就写哪个节点的key
diagram.commandHandler.scrollToPart(diagram.findNodeForKey('ROOT'));
}, 1000)
以下代码片段是完整的代码示例，可以直接复制过去
css部分
<style>
#myDiagramDiv {
width: 100%;
height: 900px;
background-color: #DAE4E4;
}
</style>
html部分
<body>
<div id="myDiagramDiv"></div>
</body>
js部分
<script>
var $ = go.GraphObject.make;
var nodeDataArray = [
{ key: "ROOT", text: '根节点'},
{ key: "a1", text: '节点1', parent: 'ROOT'},
{ key: "a2", text: '节点2', parent: 'ROOT'},
{ key: "a3", text: '节点3', parent: 'ROOT'},
{ key: "a4", text: '节点4', parent: 'ROOT'},
{ key: "a5", text: '节点5', parent: 'ROOT'},
{ key: "a6", text: '节点6', parent: 'ROOT'},
{ key: "a7", text: '节点7', parent: 'ROOT'},
{ key: "a8", text: '节点8', parent: 'ROOT'},
{ key: "a9", text: '节点9', parent: 'ROOT'},
{ key: "b1", text: '节点1', parent: 'ROOT'},
{ key: "b2", text: '节点2', parent: 'ROOT'},
{ key: "b3", text: '节点3', parent: 'ROOT'},
{ key: "b4", text: '节点4', parent: 'ROOT'},
{ key: "b5", text: '节点5', parent: 'ROOT'},
{ key: "b6", text: '节点6', parent: 'ROOT'},
{ key: "b7", text: '节点7', parent: 'ROOT'},
{ key: "b8", text: '节点8', parent: 'ROOT'},
{ key: "b9", text: '节点9', parent: 'ROOT'},
{ key: "c1", text: '节点1', parent: 'ROOT'},
{ key: "c2", text: '节点2', parent: 'ROOT'},
]
var linkDatasArray = [
{from: 'ROOT', to: 'a1'},
{from: 'ROOT', to: 'a2'},
{from: 'ROOT', to: 'a3'},
{from: 'ROOT', to: 'a4'},
{from: 'ROOT', to: 'a5'},
{from: 'ROOT', to: 'a6'},
{from: 'ROOT', to: 'a7'},
{from: 'ROOT', to: 'a8'},
{from: 'ROOT', to: 'a9'},
{from: 'ROOT', to: 'b1'},
{from: 'ROOT', to: 'b2'},
{from: 'ROOT', to: 'b3'},
{from: 'ROOT', to: 'b4'},
{from: 'ROOT', to: 'b5'},
{from: 'ROOT', to: 'b6'},
{from: 'ROOT', to: 'b7'},
{from: 'ROOT', to: 'b8'},
{from: 'ROOT', to: 'b9'},
{from: 'ROOT', to: 'c1'},
{from: 'ROOT', to: 'c2'},
]
var diagram = $(go.Diagram, "myDiagramDiv", {
layout: $(go.TreeLayout, {
angle: 90,
nodeSpacing: 20,
layerSpacing: 70
}),
});
//加上定时器延时一下，防止操作过早，节点还未渲染而不生效
setTimeout(()=>{
diagram.commandHandler.scrollToPart(diagram.findNodeForKey('ROOT'));
}, 1000)
// 创建一个节点模版
diagram.nodeTemplate = $(go.Node, "Spot",
$(go.Panel, "Auto",
$(go.Shape, {
figure: "Rectangle",
}, new go.Binding("figure", "figure"), new go.Binding("fill", "color"), new go.Binding("stroke", "color")),
$(go.TextBlock, {
margin: 8,
stroke: '#fff',//文字颜色
editable: true,
}, new go.Binding("text", "text")),
{ click: (e, obj)=>{
console.log('节点点击', e, obj)
} },
),
);
// 创建一个箭头模版
diagram.linkTemplate = $(go.Link,
{
routing: go.Link.Orthogonal,// go.Link.Normal 直线 go.Link.Orthogonal 折线
},
//线条
$(go.Shape,
new go.Binding('stroke', 'link_color')
),
//箭头
$(go.Shape,
{ toArrow: "OpenTriangle" },
new go.Binding('stroke', 'link_color')
),
{ click: (e, obj)=>{
console.log('线条', e, obj)
} },
);
// 生成节点图
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDatasArray)
</script>
