在 goJS 图上鼠标悬停时添加文本
Add text on mouse hover on goJS diagram
我想用 JavaScript 和 GoJS. I also want when mouse hoovers above a node to show a text with some Info about each node. I tried to use this example 创建一个 ER（实体关系图），这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ER diagram</title>
<meta name="description" content="Interactive entity-relationship diagram or data model diagram implemented by GoJS in JavaScript for HTML." />
<!-- Copyright 1998-2018 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.10/go-debug.js"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
$(go.Diagram, "myDiagramDiv", // must name or refer to the DIV HTML element
{
initialContentAlignment: go.Spot.Left,
allowDelete: false,
allowCopy: false,
layout: $(go.ForceDirectedLayout),
"undoManager.isEnabled": true
});
function diagramInfo(model) {
return "A returned text for dispaly";
}
// provide a tooltip for the background of the Diagram, when not over any Part
myDiagram.toolTip =
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#CCFFCC" }),
$(go.TextBlock, { margin: 4 },
// use a converter to display information about the diagram model
new go.Binding("text", "", diagramInfo))
);
var nodeHoverAdornment =
$(go.Adornment, "Spot",
{
background: "transparent",
// hide the Adornment when the mouse leaves it
mouseLeave: function(e, obj) {
var ad = obj.part;
ad.adornedPart.removeAdornment("mouseHover");
}
},
$(go.Placeholder,
{
background: "transparent", // to allow this Placeholder to be "seen" by mouse events
isActionable: true, // needed because this is in a temporary Layer
click: function(e, obj) {
var node = obj.part.adornedPart;
node.diagram.select(node);
}
})
);
// define several shared Brushes
var yellowgrad = $(go.Brush, "Linear", { 0: "rgb(254, 221, 50)", 1: "rgb(254, 182, 50)" });
var lightgrad = $(go.Brush, "Linear", { 1: "#E6E6FA", 0: "#FFFAF0" });
// 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.TextBlock,
{ stroke: "#333333",
font: "bold 14px sans-serif" },
new go.Binding("text", "name"))
);
// define the Node template, representing an entity
myDiagram.nodeTemplate =
$(go.Node, "Auto", // the whole node panel
{ selectionAdorned: true,
resizable: true,
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.AllSides,
isShadowed: true,
shadowColor: "#C5C1AA" },
new go.Binding("location", "location").makeTwoWay(),
// whenever the PanelExpanderButton changes the visible property of the "LIST" panel,
// clear out any desiredSize set by the ResizingTool.
new go.Binding("desiredSize", "visible", function(v) { return new go.Size(NaN, NaN); }).ofObject("LIST"),
// define the node's outer shape, which will surround the Table
$(go.Shape, "Rectangle",
{ fill: lightgrad, stroke: "#756875", strokeWidth: 3 }),
$(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 sans-serif"
},
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"))
,{
toolTip: // define a tooltip for each node that displays the color as text
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#FFFFCC" }),
$(go.TextBlock, { margin: 50 },
new go.Binding("text", "color"))
) // end of Adornment
}
) // end Table Panel
);
// define the Link template, representing a relationship
myDiagram.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: "#303B45", strokeWidth: 2.5 }),
$(go.TextBlock, // the "from" label
{
textAlign: "center",
font: "bold 14px sans-serif",
stroke: "#1967B3",
segmentIndex: 0,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.OrientUpright
},
new go.Binding("text", "text")),
$(go.TextBlock, // the "to" label
{
textAlign: "center",
font: "bold 14px sans-serif",
stroke: "#1967B3",
segmentIndex: -1,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.OrientUpright
},
new go.Binding("text", "toText"))
);
// create the model for the E-R diagram
var nodeDataArray = [
{ key: "tabA",
items: [ { name: "TabA Key", iskey: true, figure: "Decision", color: 'pink' } ] },
{ key: "tabB",
items: [ { name: "TabB Key", iskey: true, figure: "Decision", color: 'pink' },
{ name: "TabB attribute", iskey: true, figure: "Decision", color: 'lightblue' } ] },
{ key: "tabC",
items: [ { name: "TabC Key", iskey: true, figure: "Decision", color: 'pink' }] }
];
//Options [BpmnEventTimer,BpmnEventConditional,MagneticData,Cube1,Decision,TriangleUp]
var linkDataArray = [
{ from: "tabA", to: "tabB", text: "1", toText: "1" },
{ from: "tabB", to: "tabC", text: "1", toText: "2" }
];
myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
}
</script>
</head>
<body onload="init()">
<div id="sample">
<div id="myDiagramDiv" style="background-color: white; border: solid 1px black; width: 50%; height: 600px;"></div>
</div>
</body>
</html>
如您所见，鼠标悬停在节点上时会生成一个文本框，但不会显示任何文本。任何人都可以帮助如何为每个节点生成文本和具体不同的文本吗？我想为该文本中的每个节点显示不同的（预定的）描述。
提前感谢您的回答。
是的，您应该使用工具提示作为鼠标悬停时显示内容的标准机制：https://gojs.net/latest/intro/tooltips.html。
在您的节点模板中，您似乎已将工具提示分配给节点内的面板。这意味着它是绑定到节点绑定到的相同数据的数据。
但是，您对 new go.Binding("text", "color") 的绑定将意味着在您的节点数据上存在 "color" 属性。当我查看模型中的节点数据时，节点上似乎没有任何 "color" 属性 。因此不评估绑定。由于您没有为 TextBlock.text 属性 分配初始值，因此没有要呈现的字符串。
个别item数据上有这样一个属性，但是你没有在itemTemplate中分配tooltip
根据 Walter Northwoods 的建议，我在项目模板中添加了工具提示，这是每个节点项目都有自己的描述性工具提示的代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ER diagram</title>
<meta name="description" content="Interactive entity-relationship diagram or data model diagram implemented by GoJS in JavaScript for HTML." />
<!-- Copyright 1998-2018 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.10/go-debug.js"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
$(go.Diagram, "myDiagramDiv", // must name or refer to the DIV HTML element
{
initialContentAlignment: go.Spot.Left,
allowDelete: false,
allowCopy: false,
layout: $(go.ForceDirectedLayout),
"undoManager.isEnabled": true
});
function diagramInfo(model) {
return "A returned text for dispaly";
}
// provide a tooltip for the background of the Diagram, when not over any Part
myDiagram.toolTip =
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#CCFFCC" }),
$(go.TextBlock, { margin: 4 },
// use a converter to display information about the diagram model
new go.Binding("text", "", diagramInfo))
);
var nodeHoverAdornment =
$(go.Adornment, "Spot",
{
background: "transparent",
// hide the Adornment when the mouse leaves it
mouseLeave: function(e, obj) {
var ad = obj.part;
ad.adornedPart.removeAdornment("mouseHover");
}
},
$(go.Placeholder,
{
background: "transparent", // to allow this Placeholder to be "seen" by mouse events
isActionable: true, // needed because this is in a temporary Layer
click: function(e, obj) {
var node = obj.part.adornedPart;
node.diagram.select(node);
}
})
);
// define several shared Brushes
var yellowgrad = $(go.Brush, "Linear", { 0: "rgb(254, 221, 50)", 1: "rgb(254, 182, 50)" });
var lightgrad = $(go.Brush, "Linear", { 1: "#E6E6FA", 0: "#FFFAF0" });
// 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.TextBlock,
{ stroke: "#333333",
font: "bold 14px sans-serif" },
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: 10 },
new go.Binding("text", "desc"))
) // end of Adornment
}
);
// define the Node template, representing an entity
myDiagram.nodeTemplate =
$(go.Node, "Auto", // the whole node panel
{ selectionAdorned: true,
resizable: true,
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.AllSides,
isShadowed: true,
shadowColor: "#C5C1AA" },
new go.Binding("location", "location").makeTwoWay(),
// whenever the PanelExpanderButton changes the visible property of the "LIST" panel,
// clear out any desiredSize set by the ResizingTool.
new go.Binding("desiredSize", "visible", function(v) { return new go.Size(NaN, NaN); }).ofObject("LIST"),
// define the node's outer shape, which will surround the Table
$(go.Shape, "Rectangle",
{ fill: lightgrad, stroke: "#756875", strokeWidth: 3 }),
$(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 sans-serif"
},
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
);
// define the Link template, representing a relationship
myDiagram.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: "#303B45", strokeWidth: 2.5 }),
$(go.TextBlock, // the "from" label
{
textAlign: "center",
font: "bold 14px sans-serif",
stroke: "#1967B3",
segmentIndex: 0,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.OrientUpright
},
new go.Binding("text", "text")),
$(go.TextBlock, // the "to" label
{
textAlign: "center",
font: "bold 14px sans-serif",
stroke: "#1967B3",
segmentIndex: -1,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.OrientUpright
},
new go.Binding("text", "toText"))
);
// create the model for the E-R diagram
var nodeDataArray = [
{ key: "tabA",
items: [ { name: "TabA Key", iskey: true, figure: "Decision", color: 'pink' , desc: "Tab A Key is tab A key" } ],
nodedesc: "Tab A desc" },
{ key: "tabB",
items: [ { name: "TabB Key", iskey: true, figure: "Decision", color: 'pink', desc: "Tab B Key is tab B key" },
{ name: "TabB attribute", iskey: true, figure: "Decision", color: 'lightblue', desc: "Tab B Attribute is tab B attr" } ],
nodedesc: "Tab B desc" },
{ key: "tabC",
items: [ { name: "TabC Key", iskey: true, figure: "Decision", color: 'pink' , desc: "Tab C Key is tab C key" } ],
nodedesc : "Tab C desc" }
];
//Options [BpmnEventTimer,BpmnEventConditional,MagneticData,Cube1,Decision,TriangleUp]
var linkDataArray = [
{ from: "tabA", to: "tabB", text: "1", toText: "1" },
{ from: "tabB", to: "tabC", text: "1", toText: "2" }
];
myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
}
</script>
</head>
<body onload="init()">
<div id="sample">
<div id="myDiagramDiv" style="background-color: white; border: solid 1px black; width: 50%; height: 600px;"></div>
</div>
</body>
</html>
为了简化答案 - 您需要将工具提示 属性 添加到您的 nodeTemplate 并绑定数据（在此示例中我绑定到 nodeDataArray.key ），类比于此：
yourDiagram.nodeTemplate = go.GraphObject.make(go.Node, 'Spot',
{
toolTip:
go.GraphObject.make(go.Adornment, "Spot",
{
background: "transparent"
},
go.GraphObject.make(go.Placeholder, {
padding: 5
}),
go.GraphObject.make(go.TextBlock,
{
alignment: go.Spot.Top,
alignmentFocus: go.Spot.Bottom,
stroke: "#0f1b54",
editable: true
},
new go.Binding("text", "key", function (tooltip_key) {
return tooltip_key
})),
)
},
我想用 JavaScript 和 GoJS. I also want when mouse hoovers above a node to show a text with some Info about each node. I tried to use this example 创建一个 ER（实体关系图），这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ER diagram</title>
<meta name="description" content="Interactive entity-relationship diagram or data model diagram implemented by GoJS in JavaScript for HTML." />
<!-- Copyright 1998-2018 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.10/go-debug.js"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
$(go.Diagram, "myDiagramDiv", // must name or refer to the DIV HTML element
{
initialContentAlignment: go.Spot.Left,
allowDelete: false,
allowCopy: false,
layout: $(go.ForceDirectedLayout),
"undoManager.isEnabled": true
});
function diagramInfo(model) {
return "A returned text for dispaly";
}
// provide a tooltip for the background of the Diagram, when not over any Part
myDiagram.toolTip =
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#CCFFCC" }),
$(go.TextBlock, { margin: 4 },
// use a converter to display information about the diagram model
new go.Binding("text", "", diagramInfo))
);
var nodeHoverAdornment =
$(go.Adornment, "Spot",
{
background: "transparent",
// hide the Adornment when the mouse leaves it
mouseLeave: function(e, obj) {
var ad = obj.part;
ad.adornedPart.removeAdornment("mouseHover");
}
},
$(go.Placeholder,
{
background: "transparent", // to allow this Placeholder to be "seen" by mouse events
isActionable: true, // needed because this is in a temporary Layer
click: function(e, obj) {
var node = obj.part.adornedPart;
node.diagram.select(node);
}
})
);
// define several shared Brushes
var yellowgrad = $(go.Brush, "Linear", { 0: "rgb(254, 221, 50)", 1: "rgb(254, 182, 50)" });
var lightgrad = $(go.Brush, "Linear", { 1: "#E6E6FA", 0: "#FFFAF0" });
// 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.TextBlock,
{ stroke: "#333333",
font: "bold 14px sans-serif" },
new go.Binding("text", "name"))
);
// define the Node template, representing an entity
myDiagram.nodeTemplate =
$(go.Node, "Auto", // the whole node panel
{ selectionAdorned: true,
resizable: true,
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.AllSides,
isShadowed: true,
shadowColor: "#C5C1AA" },
new go.Binding("location", "location").makeTwoWay(),
// whenever the PanelExpanderButton changes the visible property of the "LIST" panel,
// clear out any desiredSize set by the ResizingTool.
new go.Binding("desiredSize", "visible", function(v) { return new go.Size(NaN, NaN); }).ofObject("LIST"),
// define the node's outer shape, which will surround the Table
$(go.Shape, "Rectangle",
{ fill: lightgrad, stroke: "#756875", strokeWidth: 3 }),
$(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 sans-serif"
},
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"))
,{
toolTip: // define a tooltip for each node that displays the color as text
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#FFFFCC" }),
$(go.TextBlock, { margin: 50 },
new go.Binding("text", "color"))
) // end of Adornment
}
) // end Table Panel
);
// define the Link template, representing a relationship
myDiagram.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: "#303B45", strokeWidth: 2.5 }),
$(go.TextBlock, // the "from" label
{
textAlign: "center",
font: "bold 14px sans-serif",
stroke: "#1967B3",
segmentIndex: 0,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.OrientUpright
},
new go.Binding("text", "text")),
$(go.TextBlock, // the "to" label
{
textAlign: "center",
font: "bold 14px sans-serif",
stroke: "#1967B3",
segmentIndex: -1,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.OrientUpright
},
new go.Binding("text", "toText"))
);
// create the model for the E-R diagram
var nodeDataArray = [
{ key: "tabA",
items: [ { name: "TabA Key", iskey: true, figure: "Decision", color: 'pink' } ] },
{ key: "tabB",
items: [ { name: "TabB Key", iskey: true, figure: "Decision", color: 'pink' },
{ name: "TabB attribute", iskey: true, figure: "Decision", color: 'lightblue' } ] },
{ key: "tabC",
items: [ { name: "TabC Key", iskey: true, figure: "Decision", color: 'pink' }] }
];
//Options [BpmnEventTimer,BpmnEventConditional,MagneticData,Cube1,Decision,TriangleUp]
var linkDataArray = [
{ from: "tabA", to: "tabB", text: "1", toText: "1" },
{ from: "tabB", to: "tabC", text: "1", toText: "2" }
];
myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
}
</script>
</head>
<body onload="init()">
<div id="sample">
<div id="myDiagramDiv" style="background-color: white; border: solid 1px black; width: 50%; height: 600px;"></div>
</div>
</body>
</html>
如您所见，鼠标悬停在节点上时会生成一个文本框，但不会显示任何文本。任何人都可以帮助如何为每个节点生成文本和具体不同的文本吗？我想为该文本中的每个节点显示不同的（预定的）描述。
提前感谢您的回答。
是的，您应该使用工具提示作为鼠标悬停时显示内容的标准机制：https://gojs.net/latest/intro/tooltips.html。
在您的节点模板中，您似乎已将工具提示分配给节点内的面板。这意味着它是绑定到节点绑定到的相同数据的数据。
但是，您对 new go.Binding("text", "color") 的绑定将意味着在您的节点数据上存在 "color" 属性。当我查看模型中的节点数据时，节点上似乎没有任何 "color" 属性 。因此不评估绑定。由于您没有为 TextBlock.text 属性 分配初始值，因此没有要呈现的字符串。
个别item数据上有这样一个属性，但是你没有在itemTemplate中分配tooltip
根据 Walter Northwoods 的建议，我在项目模板中添加了工具提示，这是每个节点项目都有自己的描述性工具提示的代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ER diagram</title>
<meta name="description" content="Interactive entity-relationship diagram or data model diagram implemented by GoJS in JavaScript for HTML." />
<!-- Copyright 1998-2018 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.10/go-debug.js"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
$(go.Diagram, "myDiagramDiv", // must name or refer to the DIV HTML element
{
initialContentAlignment: go.Spot.Left,
allowDelete: false,
allowCopy: false,
layout: $(go.ForceDirectedLayout),
"undoManager.isEnabled": true
});
function diagramInfo(model) {
return "A returned text for dispaly";
}
// provide a tooltip for the background of the Diagram, when not over any Part
myDiagram.toolTip =
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#CCFFCC" }),
$(go.TextBlock, { margin: 4 },
// use a converter to display information about the diagram model
new go.Binding("text", "", diagramInfo))
);
var nodeHoverAdornment =
$(go.Adornment, "Spot",
{
background: "transparent",
// hide the Adornment when the mouse leaves it
mouseLeave: function(e, obj) {
var ad = obj.part;
ad.adornedPart.removeAdornment("mouseHover");
}
},
$(go.Placeholder,
{
background: "transparent", // to allow this Placeholder to be "seen" by mouse events
isActionable: true, // needed because this is in a temporary Layer
click: function(e, obj) {
var node = obj.part.adornedPart;
node.diagram.select(node);
}
})
);
// define several shared Brushes
var yellowgrad = $(go.Brush, "Linear", { 0: "rgb(254, 221, 50)", 1: "rgb(254, 182, 50)" });
var lightgrad = $(go.Brush, "Linear", { 1: "#E6E6FA", 0: "#FFFAF0" });
// 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.TextBlock,
{ stroke: "#333333",
font: "bold 14px sans-serif" },
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: 10 },
new go.Binding("text", "desc"))
) // end of Adornment
}
);
// define the Node template, representing an entity
myDiagram.nodeTemplate =
$(go.Node, "Auto", // the whole node panel
{ selectionAdorned: true,
resizable: true,
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.AllSides,
isShadowed: true,
shadowColor: "#C5C1AA" },
new go.Binding("location", "location").makeTwoWay(),
// whenever the PanelExpanderButton changes the visible property of the "LIST" panel,
// clear out any desiredSize set by the ResizingTool.
new go.Binding("desiredSize", "visible", function(v) { return new go.Size(NaN, NaN); }).ofObject("LIST"),
// define the node's outer shape, which will surround the Table
$(go.Shape, "Rectangle",
{ fill: lightgrad, stroke: "#756875", strokeWidth: 3 }),
$(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 sans-serif"
},
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
);
// define the Link template, representing a relationship
myDiagram.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: "#303B45", strokeWidth: 2.5 }),
$(go.TextBlock, // the "from" label
{
textAlign: "center",
font: "bold 14px sans-serif",
stroke: "#1967B3",
segmentIndex: 0,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.OrientUpright
},
new go.Binding("text", "text")),
$(go.TextBlock, // the "to" label
{
textAlign: "center",
font: "bold 14px sans-serif",
stroke: "#1967B3",
segmentIndex: -1,
segmentOffset: new go.Point(NaN, NaN),
segmentOrientation: go.Link.OrientUpright
},
new go.Binding("text", "toText"))
);
// create the model for the E-R diagram
var nodeDataArray = [
{ key: "tabA",
items: [ { name: "TabA Key", iskey: true, figure: "Decision", color: 'pink' , desc: "Tab A Key is tab A key" } ],
nodedesc: "Tab A desc" },
{ key: "tabB",
items: [ { name: "TabB Key", iskey: true, figure: "Decision", color: 'pink', desc: "Tab B Key is tab B key" },
{ name: "TabB attribute", iskey: true, figure: "Decision", color: 'lightblue', desc: "Tab B Attribute is tab B attr" } ],
nodedesc: "Tab B desc" },
{ key: "tabC",
items: [ { name: "TabC Key", iskey: true, figure: "Decision", color: 'pink' , desc: "Tab C Key is tab C key" } ],
nodedesc : "Tab C desc" }
];
//Options [BpmnEventTimer,BpmnEventConditional,MagneticData,Cube1,Decision,TriangleUp]
var linkDataArray = [
{ from: "tabA", to: "tabB", text: "1", toText: "1" },
{ from: "tabB", to: "tabC", text: "1", toText: "2" }
];
myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
}
</script>
</head>
<body onload="init()">
<div id="sample">
<div id="myDiagramDiv" style="background-color: white; border: solid 1px black; width: 50%; height: 600px;"></div>
</div>
</body>
</html>
为了简化答案 - 您需要将工具提示 属性 添加到您的 nodeTemplate 并绑定数据（在此示例中我绑定到 nodeDataArray.key ），类比于此：
yourDiagram.nodeTemplate = go.GraphObject.make(go.Node, 'Spot',
{
toolTip:
go.GraphObject.make(go.Adornment, "Spot",
{
background: "transparent"
},
go.GraphObject.make(go.Placeholder, {
padding: 5
}),
go.GraphObject.make(go.TextBlock,
{
alignment: go.Spot.Top,
alignmentFocus: go.Spot.Bottom,
stroke: "#0f1b54",
editable: true
},
new go.Binding("text", "key", function (tooltip_key) {
return tooltip_key
})),
)
},