Menu
I want to create an ER (entity relationship diagram) with JavaScript and 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 and here is my code:
<!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>As you can see It generates a text box on mouse hoover over a node but it does not display any text. Can anyone help on how to generate text and specifically different text for each node? I want to display a different (predetermined) description for each node in that text.
Thanks in advance for any answer.
554
In previous article, I have mentioned How to change color of SVG (Various ways using CSS) but now in this article, I have mentioned, how we can add hover text on any html element without using Javascript and with plain HTML only. You can simply add title attribute in any HTML element and it will show text on mouse over text.
It is possible to add a mouseover text description without Javascript and even without CSS. Let’s see how we can do this by using only HTML. Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass) To add a text on hover, you’ll need to use the title attribute.
Normally, GoJS updates the diagram automatically, and completeing a transaction ensures an immediate update. The most common reason to call this method when the HTML Div has changed size but the window has not changed size, and the Diagram needs to be notified of this DOM change. See an example of resizing diagrams here.
You would have to include " data-tootltip="Some text here for tooltip" " to include it in HTML and show. One way to initialize all tooltips on a page would be to select them by their data-toggle attribute: so, if you have HTML like below, with Bootstrap and Popper.js reference in the page It will show mouse over text on element with fancy output.
Yes, you should be using tooltips as the standard mechanism for showing something upon a mouse hover: https://gojs.net/latest/intro/tooltips.html.
In your node template it appears that you have assigned a tooltip to a panel inside your node. That means it is data bound to the same data that the node is bound to.
However, your binding of new go.Binding("text", "color") would imply that there be a "color" property on your node data. When I look at the node data in the model, there does not seem to be any "color" property on the node. So the binding is not evaluated. Since you hadn't assigned an initial value to the TextBlock.text property, there's no string to be rendered.
There is such a property on the individual item data, but you didn't assign the tooltip in the itemTemplate.
128
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
