1

このリンクページhttp://gojs.net/temp/swimBands2.htmlとまったく同じgoJSコードを使用してい ます

ノードが単純な場合は見栄えがしますが、各ノード内に多くのデータがバインドされている場合、ヘッダーが表示されないようです。ズームアウトして見る必要があります。

誰かが私がしなければならないことを手伝ってくれますか?

コードを以下のように変更します

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) に変更します。ヘッダーは下がりますが、ノードの位置は変わりません。

ここに画像の説明を入力

4

1 に答える 1

1

これは、「バンド」を保持するパーツが「グリッド」レイヤーにあり、そのレイヤーにあるパーツがDiagram.documentBoundsに含まれていないためです。そのため、ユーザー (デフォルトでは) はドキュメントの境界を超えてスクロールできません。

ユーザーに何を許可したいかによって、いくつかの解決策が考えられます。

Diagram.scrollModeをに設定するgo.Diagram.InfiniteScrollと、ユーザーは好きな場所にスクロールできます。しかし、それを許可するかどうかはわかりません。ユーザーが迷子になる可能性があります。

または、「グリッド」レイヤーを変更して myDiagram.findLayer("Grid").isBoundsIncluded = true; 、そのレイヤーのパーツが自動的にDiagram.documentBoundsに含まれるようにすることもできます。そのレイヤーに他に何かがある場合、それが望ましい場合とそうでない場合があります。

または、その「VerticalBands」パーツを通常のレイヤーに配置して、選択または選択できないようにすることも layerName: "Background", selectable: false, pickable: false, できます。他のパーツを保持するために「背景」レイヤーを使用している場合、これはあまり望ましくありません。

于 2016-01-26T23:24:18.210 に答える