GoJs 改变整体节点的中心位置

来一颗砂糖橘

已于 2023-03-30 13:23:20 修改

阅读量2.6w

点赞数 4

文章标签： javascript css html

于 2023-03-30 12:54:08 首次发布

本文链接：https://blog.csdn.net/weixin_42554330/article/details/129855041

版权

问题：节点数量太多，导致一开始画布上只显示出冰山一角（即节点树的左上角）
需求：需要在页面一开始时，将一个节点作为中心点，可以使用 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>

设置前
设置后

来一颗砂糖橘

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
GoJs 改变整体节点的中心位置

问题：节点数量太多，导致一开始画布上只显示出冰山一角（即节点树的左上角）需求：需要在页面一开始时，将一个节点作为中心点，可以使用方法重置中心点以下代码片段是完整的代码示例，也可以直接整体复制过去。
复制链接

扫一扫