TreeLayout 不考虑节点的位置
TreeLayout not considering node’s location
我使用 GOJS ER 图示例，并将布局作为 TreeLayout。我已将节点的位置数据和 IsInitial 设置为 false，将 isOngoing 设置为 false，图表未根据节点的位置集定位。这是我的代码：
dgmEntityRelationship = $(go.Diagram, "dgmEntityRelationship",
{
initialContentAlignment: go.Spot.Top,
allowDelete: false,
allowCopy: false,
layout: $(go.TreeLayout, // use a TreeLayout to position all of the nodes
{
isInitial: false,
isOngoing: false,
treeStyle: go.TreeLayout.StyleRootOnly,
angle: 90,
layerSpacing: 80,
alternateAngle: 0,
alternateAlignment: go.TreeLayout.AlignmentStart,
alternateNodeIndent: 20,
alternateNodeIndentPastParent: 1,
alternateNodeSpacing: 20,
alternateLayerSpacing: 40,
alternateLayerSpacingParentOverlap: 1,
alternatePortSpot: new go.Spot(0, 0.999, 20, 0),
alternateChildPortSpot: go.Spot.Left
}),
"undoManager.isEnabled": true,
click: function(e, obj)
{
var node = dgmEntityRelationship.selection.first();
if (node == null)
{
jQuery("#btnShowAddElementModal").attr("disabled", "disabled");
}
}
});
// define several shared Brushes
var bluegrad = $(go.Brush, "Linear", { 0: "rgb(150, 150, 250)", 0.5: "rgb(86, 86, 186)", 1: "rgb(86, 86, 186)" });
var greengrad = $(go.Brush, "Linear", { 0: "rgb(158, 209, 159)", 1: "rgb(67, 101, 56)" });
var redgrad = $(go.Brush, "Linear", { 0: "rgb(206, 106, 100)", 1: "rgb(180, 56, 50)" });
var yellowgrad = $(go.Brush, "Linear", { 0: "rgb(254, 221, 50)", 1: "rgb(254, 182, 50)" });
var lightgrad = $(go.Brush, "Linear", { 1: "#e1fdfb", 0: "#cfebfe" });
// the template for each attribute in a node's array of item data
var itemTempl =
$(go.Panel, "Horizontal",
$(go.Shape,
{ desiredSize: new go.Size(10, 10) },
new go.Binding("figure", "figure"),
new go.Binding("fill", "color")),
$(go.Panel, "Table",
{
margin: 2
},
$(go.RowColumnDefinition, { row: 0, sizing: go.RowColumnDefinition.None }),
$(go.RowColumnDefinition, { column: 0, width: 150 }),
$(go.RowColumnDefinition, { column: 1, width: 100 }),
$(go.TextBlock,
{
row: 0,
column: 0, alignment: go.Spot.Left,
margin: new go.Margin(0, 4, 0, 2), // leave room for Button
stroke: "#333333",
font: "bold 14px Roboto"
},
new go.Binding("text", "name")),
{
toolTip: // define a tooltip for each node that displays the color as text
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#FFFFCC" }),
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "name"))
) // end of Adornment
},
$(go.TextBlock,
{
row: 0,
column: 1,
alignment: go.Spot.Left,
margin: new go.Margin(0, 4, 0, 2), // leave room for Button
stroke: "#333333",
font: "bold 14px Roboto"
},
new go.Binding("text", "dataType")))
);
// define the Node template, representing an entity
dgmEntityRelationship.nodeTemplate =
$(go.Node, "Auto", // the whole node panel
{
selectionAdorned: false,
resizable: true,
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.AllSides,
isShadowed: true,
shadowColor: "#d7d7d7",
},
{
click: function (e, obj) {
var node = dgmEntityRelationship.selection.first();
if (node != null) {
if (node.data.key == "Root") {
jQuery("#btnDeleteElement").attr("disabled", "disabled");
}
else {
jQuery("#btnDeleteElement").removeAttr("disabled");
}
jQuery("#btnShowAddElementModal").removeAttr("disabled");
}
}
},
new go.Binding("location", "loc").makeTwoWay(),
// define the node's outer shape, which will surround the Table
$(go.Shape, "RoundedRectangle",
{
fill: lightgrad, stroke: "#2196f3", strokeWidth: 1,
}),
$(go.Panel, "Table",
{
margin: 8, stretch: go.GraphObject.Fill
},
$(go.RowColumnDefinition, { row: 0, sizing: go.RowColumnDefinition.None }),
// the table header
$(go.TextBlock,
{
row: 0, alignment: go.Spot.Center,
margin: new go.Margin(0, 14, 0, 2), // leave room for Button
font: "bold 16px Roboto"
},
new go.Binding("text", "key")),
// the collapse/expand button
$("PanelExpanderButton", "LIST", // the name of the element whose visibility this button toggles
{ row: 0, alignment: go.Spot.TopRight }),
// the list of Panels, each showing an attribute
$(go.Panel, "Vertical",
{
name: "LIST",
row: 1,
padding: 3,
alignment: go.Spot.TopLeft,
defaultAlignment: go.Spot.Left,
stretch: go.GraphObject.Horizontal,
itemTemplate: itemTempl
},
new go.Binding("itemArray", "items"))
) // end Table Panel
); // end Node
// define the Link template, representing a relationship
dgmEntityRelationship.linkTemplate =
$(go.Link, // the whole link panel
{
selectionAdorned: true,
layerName: "Foreground",
reshapable: true,
routing: go.Link.AvoidsNodes,
corner: 5,
curve: go.Link.JumpOver
},
$(go.Shape, // the link shape
{ stroke: "#333333", strokeWidth: 1.5}),
$(go.TextBlock, // the "from" label
{
textAlign: "center",
font: "14px Roboto",
stroke: "#1967B3",
segmentIndex: 0,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.None
},
new go.Binding("text", "text")),
$(go.TextBlock, // the "to" label
{
textAlign: "center",
font: "bold 14px Roboto",
stroke: "#1967B3",
segmentIndex: -1,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.None
},
new go.Binding("text", "toText"))
);
loadDiagramData();
}
请帮我找出问题所在。谢谢你的帮助！！！
您在 Node.location 上有 TwoWay Binding，很好。并且您已禁用自动布局失效（Layout.isInitial 和 Layout.isOngoing），因此 Diagram.layout 不会自动移动节点。
使用调试版的 GoJS 库时是否有任何错误或警告？
我的猜测是您没有提供 Point 的实例作为 data.loc 的值，这会导致绑定错误。
编辑：以下是否符合您的要求？
myDiagram = $(go.Diagram, "myDiagramDiv", {
layout: $(go.TreeLayout, { isInitial: false, isOngoing: false })
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
new go.Binding("location", "loc").makeTwoWay(),
$(go.Shape, { fill: "white"}),
$(go.TextBlock, { margin: 8 }, new go.Binding("text", "key"))
);
myDiagram.model = new go.GraphLinksModel([
{ key: "Alpha", loc: new go.Point(30, 50) },
{ key: "Beta", loc: new go.Point(80, 10) },
{ key: "Gamma", loc: new go.Point(130, 70) },
{ key: "Delta", loc: new go.Point(110, 100) }
], [
{ from: "Alpha", to: "Beta" }, { from: "Alpha", to: "Gamma" }, { from: "Beta", to: "Beta" }, { from: "Gamma", to: "Delta" }, { from: "Delta", to: "Alpha" } ]);
我使用 GOJS ER 图示例，并将布局作为 TreeLayout。我已将节点的位置数据和 IsInitial 设置为 false，将 isOngoing 设置为 false，图表未根据节点的位置集定位。这是我的代码：
dgmEntityRelationship = $(go.Diagram, "dgmEntityRelationship",
{
initialContentAlignment: go.Spot.Top,
allowDelete: false,
allowCopy: false,
layout: $(go.TreeLayout, // use a TreeLayout to position all of the nodes
{
isInitial: false,
isOngoing: false,
treeStyle: go.TreeLayout.StyleRootOnly,
angle: 90,
layerSpacing: 80,
alternateAngle: 0,
alternateAlignment: go.TreeLayout.AlignmentStart,
alternateNodeIndent: 20,
alternateNodeIndentPastParent: 1,
alternateNodeSpacing: 20,
alternateLayerSpacing: 40,
alternateLayerSpacingParentOverlap: 1,
alternatePortSpot: new go.Spot(0, 0.999, 20, 0),
alternateChildPortSpot: go.Spot.Left
}),
"undoManager.isEnabled": true,
click: function(e, obj)
{
var node = dgmEntityRelationship.selection.first();
if (node == null)
{
jQuery("#btnShowAddElementModal").attr("disabled", "disabled");
}
}
});
// define several shared Brushes
var bluegrad = $(go.Brush, "Linear", { 0: "rgb(150, 150, 250)", 0.5: "rgb(86, 86, 186)", 1: "rgb(86, 86, 186)" });
var greengrad = $(go.Brush, "Linear", { 0: "rgb(158, 209, 159)", 1: "rgb(67, 101, 56)" });
var redgrad = $(go.Brush, "Linear", { 0: "rgb(206, 106, 100)", 1: "rgb(180, 56, 50)" });
var yellowgrad = $(go.Brush, "Linear", { 0: "rgb(254, 221, 50)", 1: "rgb(254, 182, 50)" });
var lightgrad = $(go.Brush, "Linear", { 1: "#e1fdfb", 0: "#cfebfe" });
// the template for each attribute in a node's array of item data
var itemTempl =
$(go.Panel, "Horizontal",
$(go.Shape,
{ desiredSize: new go.Size(10, 10) },
new go.Binding("figure", "figure"),
new go.Binding("fill", "color")),
$(go.Panel, "Table",
{
margin: 2
},
$(go.RowColumnDefinition, { row: 0, sizing: go.RowColumnDefinition.None }),
$(go.RowColumnDefinition, { column: 0, width: 150 }),
$(go.RowColumnDefinition, { column: 1, width: 100 }),
$(go.TextBlock,
{
row: 0,
column: 0, alignment: go.Spot.Left,
margin: new go.Margin(0, 4, 0, 2), // leave room for Button
stroke: "#333333",
font: "bold 14px Roboto"
},
new go.Binding("text", "name")),
{
toolTip: // define a tooltip for each node that displays the color as text
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#FFFFCC" }),
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "name"))
) // end of Adornment
},
$(go.TextBlock,
{
row: 0,
column: 1,
alignment: go.Spot.Left,
margin: new go.Margin(0, 4, 0, 2), // leave room for Button
stroke: "#333333",
font: "bold 14px Roboto"
},
new go.Binding("text", "dataType")))
);
// define the Node template, representing an entity
dgmEntityRelationship.nodeTemplate =
$(go.Node, "Auto", // the whole node panel
{
selectionAdorned: false,
resizable: true,
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.AllSides,
isShadowed: true,
shadowColor: "#d7d7d7",
},
{
click: function (e, obj) {
var node = dgmEntityRelationship.selection.first();
if (node != null) {
if (node.data.key == "Root") {
jQuery("#btnDeleteElement").attr("disabled", "disabled");
}
else {
jQuery("#btnDeleteElement").removeAttr("disabled");
}
jQuery("#btnShowAddElementModal").removeAttr("disabled");
}
}
},
new go.Binding("location", "loc").makeTwoWay(),
// define the node's outer shape, which will surround the Table
$(go.Shape, "RoundedRectangle",
{
fill: lightgrad, stroke: "#2196f3", strokeWidth: 1,
}),
$(go.Panel, "Table",
{
margin: 8, stretch: go.GraphObject.Fill
},
$(go.RowColumnDefinition, { row: 0, sizing: go.RowColumnDefinition.None }),
// the table header
$(go.TextBlock,
{
row: 0, alignment: go.Spot.Center,
margin: new go.Margin(0, 14, 0, 2), // leave room for Button
font: "bold 16px Roboto"
},
new go.Binding("text", "key")),
// the collapse/expand button
$("PanelExpanderButton", "LIST", // the name of the element whose visibility this button toggles
{ row: 0, alignment: go.Spot.TopRight }),
// the list of Panels, each showing an attribute
$(go.Panel, "Vertical",
{
name: "LIST",
row: 1,
padding: 3,
alignment: go.Spot.TopLeft,
defaultAlignment: go.Spot.Left,
stretch: go.GraphObject.Horizontal,
itemTemplate: itemTempl
},
new go.Binding("itemArray", "items"))
) // end Table Panel
); // end Node
// define the Link template, representing a relationship
dgmEntityRelationship.linkTemplate =
$(go.Link, // the whole link panel
{
selectionAdorned: true,
layerName: "Foreground",
reshapable: true,
routing: go.Link.AvoidsNodes,
corner: 5,
curve: go.Link.JumpOver
},
$(go.Shape, // the link shape
{ stroke: "#333333", strokeWidth: 1.5}),
$(go.TextBlock, // the "from" label
{
textAlign: "center",
font: "14px Roboto",
stroke: "#1967B3",
segmentIndex: 0,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.None
},
new go.Binding("text", "text")),
$(go.TextBlock, // the "to" label
{
textAlign: "center",
font: "bold 14px Roboto",
stroke: "#1967B3",
segmentIndex: -1,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.None
},
new go.Binding("text", "toText"))
);
loadDiagramData();
}
请帮我找出问题所在。谢谢你的帮助！！！
您在 Node.location 上有 TwoWay Binding，很好。并且您已禁用自动布局失效（Layout.isInitial 和 Layout.isOngoing），因此 Diagram.layout 不会自动移动节点。
使用调试版的 GoJS 库时是否有任何错误或警告？
我的猜测是您没有提供 Point 的实例作为 data.loc 的值，这会导致绑定错误。
编辑：以下是否符合您的要求？
myDiagram = $(go.Diagram, "myDiagramDiv", {
layout: $(go.TreeLayout, { isInitial: false, isOngoing: false })
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
new go.Binding("location", "loc").makeTwoWay(),
$(go.Shape, { fill: "white"}),
$(go.TextBlock, { margin: 8 }, new go.Binding("text", "key"))
);
myDiagram.model = new go.GraphLinksModel([
{ key: "Alpha", loc: new go.Point(30, 50) },
{ key: "Beta", loc: new go.Point(80, 10) },
{ key: "Gamma", loc: new go.Point(130, 70) },
{ key: "Delta", loc: new go.Point(110, 100) }
], [
{ from: "Alpha", to: "Beta" }, { from: "Alpha", to: "Gamma" }, { from: "Beta", to: "Beta" }, { from: "Gamma", to: "Delta" }, { from: "Delta", to: "Alpha" } ]);