goJS 背景层不显示

Question

我正在使用与此 link 页面完全相同的 goJS 代码 http://gojs.net/temp/swimBands2.html

节点简单的时候看起来还不错，但是当每个节点里面绑定的数据很多的时候，header好像就显示不出来了。我必须缩小才能看到它。

有人可以帮我做什么吗？

我修改代码如下

myDiagram.nodeTemplateMap.add("VerticalBands",
                $(go.Part, "Position",
                        {
                            isLayoutPositioned: false,  // but still in document bounds
                            locationSpot: new go.Spot(0, 0, 0, 16),  // account for header height
                            layerName: "Grid",  // not pickable, not selectable
                            itemTemplate:
                                    $(go.Panel, "Vertical",
                                            new go.Binding("opacity", "visible", function(v) { return v ? 1 : 0; }),
                                            new go.Binding("position", "bounds", function(b) {b.position.y+= 30;return b.position; }),
                                            $(go.TextBlock,
                                                    {
                                                        stretch: go.GraphObject.Horizontal,
                                                        textAlign: "center",
                                                        wrap: go.TextBlock.None,
                                                        font: "bold 11pt sans-serif",
                                                        background: $(go.Brush, go.Brush.Linear, { 0: "lightgray", 1: "whitesmoke" })
                                                    },
                                                    new go.Binding("text"),
                                                    new go.Binding("width", "bounds", function(r) { return r.width; })),
                                            // for separator lines:
                                            //$(go.Shape, "LineV",
                                            //  { stroke: "gray", alignment: go.Spot.Left, width: 1 },
                                            //  new go.Binding("height", "bounds", function(r) { return r.height; }),
                                            //  new go.Binding("visible", "itemIndex", function(i) { return i > 0; }).ofObject()),
                                            // for rectangular bands:
                                            $(go.Shape,
                                                    { stroke: null, strokeWidth: 0 },
                                                    new go.Binding("desiredSize", "bounds", function(r) { return r.size; }),
                                                    new go.Binding("fill", "itemIndex", function(i) { return i % 2 == 0 ? "white" : "lightgray"; }).ofObject())
                                    )
                        },
                        new go.Binding("itemArray")
                ));

我将 locationSpot 修改为新的 go.Spot(0,0,0,-8)，header 正在下降，但节点的位置保持不变。

Answer 1

那是因为 Part 包含 "bands" 的部分在 "Grid" Layer 中不包含在Diagram.documentBounds中，因此用户（默认情况下）不能滚动到文档边界之外。

有几种可能的解决方案，具体取决于您希望用户执行的操作。

您可以将 Diagram.scrollMode 设置为 go.Diagram.InfiniteScroll，这允许用户滚动到他们想要的任何位置。但我不知道您是否愿意这样做——用户可能会迷路。

或者，您可以修改 "Grid" 图层： myDiagram.findLayer("Grid").isBoundsIncluded = true; 以便该层中的部分自动包含在 Diagram.documentBounds 中。如果您在该层中还有其他任何东西，那可能是也可能不是可取的。

或者，您可以将 "VerticalBands" 部分放在普通层中，使其不可拾取或选择： layerName: "Background", selectable: false, pickable: false, 如果您使用 "Background" 层来固定其他部件，则不太理想。

goJS 背景层不显示

goJS background layer is not display

javascript

jquery

gojs