1
LayoutをTreeLayoutとして使用してGOJS ER Diagramサンプルを使用します。私はノードの位置データとIsInitialをfalseに設定していて、falseはisOngoingであり、図はノードの位置に基づいて配置されていません。ここに私のコード：TreeLayoutはノードの位置を考慮していません
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();
}
私は問題を見つけるのを助けてください。ご協力ありがとうございました！！！
さらに詳しい情報がありますが、これまでにコードについて何を発見しましたか？ –
あなたの答えをありがとう。 GOJSデバッグバージョン使用時にエラーや警告はありません。私はTreelayoutでダイアグラムを望み、どこにでもノードを配置することができます。私は、point.valueとしてdata.locを与えています。しかし、まだ位置の設定に基づいて位置付けしていません。 –