How to show tree structure whenever we hover on some node like below image
As you can see in above image whenever user hovers on small icon shown on top of “A” and bottom of “A”, need to show tree structure on hover. Same applies for all small icons which will show their respective tree structure.
Image used from below example, for reference
What problem did you run into when implementing your mouseHover event handler showing an image that you have just drawn for that node? I don’t understand your question.
I want to show like this below image.
whenever user mouseHover on node “A” it will show tree as a tooltip
OK. So what problem did you run into when calling Diagram.makeImage in an “InitialLayoutCompleted” DiagramEvent listener for your temporary Diagram in a hidden Div showing a tree created by your mouseHover event handler? Or was the problem somewhere else?
I just want to know, how to show tree structure in tool tip OR is it possible to show another gojs digram in the tooptip ?
What did you just do to create this last image? The natural thing to do is basically the same, but programmatically. Just remember that there are a number of asynchronous steps to get what you want.
Wait – are you implying that you want to use a live Diagram in the tooltip, because you want the user to interact with it? Sure, you could do that too, but that wasn’t what I was expecting you wanted at the beginning of this topic, which is why I suggested just using an image of a diagram.
It turns out that the Local View sample is similar to what you want to do:
Except that you want to show the diagram with the local view in a tooltip instead of in a separate HTMLDivElement as is normally the case. So I started with a copy of that sample, stripped out unneeded code, and added a tooltip to the node template.
<!DOCTYPE html>
<html>
<head>
<title>Local View</title>
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<meta name="description" content="In one diagram show the whole tree and in a second diagram show a subset that is logically near a selected node." />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="go.js"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make; // for conciseness in defining templates
myFullDiagram =
$(go.Diagram, "fullDiagram", // each diagram refers to its DIV HTML element by id
{
initialDocumentSpot: go.Spot.Center,
layout: $(go.TreeLayout,
{ angle: 90, sorting: go.TreeLayout.SortingAscending })
});
myFullDiagram.nodeTemplate =
$(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
new go.Binding("text", "key", go.Binding.toString), // for sorting
$(go.Shape, "Rectangle",
new go.Binding("fill", "color"),
{ stroke: null }),
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key", function(k) { return "node" + k; })),
{
toolTip:
$("ToolTip",
$(go.Panel, "Viewbox", { maxSize: new go.Size(200, 200) },
$(go.Picture, { name: "PIC", scale: 0.5 },
new go.Binding("element", "adornedPart", setupLocalView).ofObject())
)
)
}
);
myFullDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Normal, selectable: false },
$(go.Shape,
{ strokeWidth: 1 })
);
myLocalDiagram =
$(go.Diagram, "localDiagram",
{
linkTemplate: myFullDiagram.linkTemplate, // same template as myFullDiagram
layout: $(go.TreeLayout,
{ angle: 90, sorting: go.TreeLayout.SortingAscending }),
"animationManager.isEnabled": false
});
myLocalDiagram.nodeTemplate =
$(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
new go.Binding("text", "key", go.Binding.toString), // for sorting
$(go.Shape, "Rectangle",
new go.Binding("fill", "color"),
{ stroke: null }),
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key", function(k) { return "node" + k; }))
);
// Create the full tree diagram
setupDiagram();
}
function render(e) {
myLocalDiagram.removeDiagramListener("InitialLayoutCompleted", render);
var tt = myFullDiagram.toolManager.currentToolTip;
if (tt !== null && tt.adornedPart.key === myLocalDiagram.selection.first().key) {
tt.findObject("PIC").element = myLocalDiagram.makeImage({ scale: 2, showTemporary: true });
}
}
function setupLocalView(node) {
// create a new model for the local Diagram
var model = new go.TreeModel();
// add the selected node and its children and grandchildren to the local diagram
var nearby = node.findTreeParts(3); // three levels of the (sub)tree
// add parent and grandparent
var parent = node.findTreeParentNode();
if (parent !== null) {
nearby.add(parent);
var grandparent = parent.findTreeParentNode();
if (grandparent !== null) {
nearby.add(grandparent);
}
}
// create the model using the same node data as in myFullDiagram's model
nearby.each(function(n) {
if (n instanceof go.Node) model.addNodeData(n.data);
});
myLocalDiagram.addDiagramListener("InitialLayoutCompleted", render);
myLocalDiagram.model = model;
// select the node at the diagram's focus
var selectedLocal = myLocalDiagram.findPartForKey(node.key);
if (selectedLocal !== null) selectedLocal.isSelected = true;
return null;
}
// Create the tree model containing TOTAL nodes, with each node having a variable number of children
function setupDiagram(total) {
if (total === undefined) total = 100; // default to 100 nodes
var nodeDataArray = [];
for (var i = 0; i < total; i++) {
nodeDataArray.push({
key: nodeDataArray.length,
color: go.Brush.randomColor()
});
}
var j = 0;
for (var i = 1; i < total; i++) {
var data = nodeDataArray[i];
data.parent = j;
if (Math.random() < 0.3) j++; // this controls the likelihood that there are enough children
}
myFullDiagram.model = new go.TreeModel(nodeDataArray);
}
</script>
</head>
<body onload="init()">
<div id="sample">
<div id="fullDiagram" style="height:550px;width:100%;border:1px solid black;margin:2px"></div>
<div id="localDiagram" style="display:none"></div>
<button onclick="setupDiagram()">Create New Tree</button>
</div>
</body>
</html>