It would really help if you made sure your code was formatted correctly and had definitions for everything the code depended on.
When I put your code and data (edited as needed to fix syntax and undefined values) into a sample, each node receives click events as I think you are expecting. Perhaps you want to set { background: "transparent" } on the Node, so that when the user clicks on a blank area of the node you get the click event?
Here’s the complete code for what I tried:
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2024 by Northwoods Software Corporation. -->
</head>
<body>
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
<textarea id="mySavedModel" style="width:100%;height:250px"></textarea>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
<script id="code">
const $ = go.GraphObject.make;
const myDiagram =
new go.Diagram("myDiagramDiv",
{
"undoManager.isEnabled": true,
"ModelChanged": e => { // just for demonstration purposes,
if (e.isTransactionFinished) { // show the model data in the page's TextArea
document.getElementById("mySavedModel").textContent = e.model.toJson();
}
}
});
function normalizeData(arr) {
let total = 0;
const categories = [];
arr.forEach(cat => {
let cattot = 0;
cat.data.forEach(det => {
if (typeof det.value !== "number") det.value = 1;
total += det.value;
cattot += det.value;
});
cat.value = cattot;
categories.push(cat);
});
if (total <= 0) return [];
const details = [];
let angle = 0;
arr.forEach(cat => {
cat.angle = angle;
cat.sweep = (cat.value / total) * 360;
cat.radius = Inner;
cat.thick = Thickness;
cat.data.forEach(det => {
det.angle = angle;
const sw = (det.value / total) * 360;
det.sweep = sw;
angle += sw;
det.radius = Inner + Thickness;
det.thick = Thickness;
if (!det.color) det.color = cat.color;
details.push(det);
});
});
return categories.concat(details);
}
function makeAnnularWedge(data) {
const angle = (typeof data.angle === "number") ? data.angle : 0; // start angle
const sweep = (typeof data.sweep === "number") ? data.sweep : 90;
const radius = (typeof data.radius === "number") ? data.radius : Inner; // inner radius
const thick = (typeof data.thick === "number") ? data.thick : Thickness;
// the Geometry will be centered about (0,0)
const outer = radius + thick; // the outer radius
const inner = radius;
const p = new go.Point(outer, 0).rotate(angle);
const q = new go.Point(inner, 0).rotate(angle + sweep);
const rad = Inner + 2 * Thickness;
const geo = new go.Geometry()
.add(new go.PathFigure(-rad, -rad)) // always make sure the Geometry includes the top left corner
.add(new go.PathFigure(rad, rad)) // and the bottom right corner of the whole circular area
.add(new go.PathFigure(p.x, p.y) // start at outer corner, go clockwise
.add(new go.PathSegment(go.PathSegment.Arc, angle, sweep, 0, 0, outer, outer))
.add(new go.PathSegment(go.PathSegment.Line, q.x, q.y)) // to opposite inner corner, then anticlockwise
.add(new go.PathSegment(go.PathSegment.Arc, angle + sweep, -sweep, 0, 0, inner, inner).close()));
return geo;
}
function computeTextAlignment(data) {
const angle = (typeof data.angle === "number") ? data.angle : 0; // start angle
const sweep = (typeof data.sweep === "number") ? data.sweep : 90;
const radius = (typeof data.radius === "number") ? data.radius : Inner; // inner radius
const thick = (typeof data.thick === "number") ? data.thick : Thickness;
const p = new go.Point(radius + thick / 2, 0).rotate(angle + sweep / 2);
return new go.Spot(0.5, 0.5, p.x, p.y);
}
const Inner = 60; // inner radius
const Thickness = 20; // Inner + Thickness is the outer radius
const data = {
"node_h": 30,
"node_w": 30,
"font": "750 14px Droid Serif, sans-serif",
"inner_font": "bold 12pt sans-serif",
};
myDiagram.nodeTemplate =
$(go.Node, "Spot",
//{
// click: function(e, node) {
// debugger
// var textKey = node.data.text;
//console.log("Clicked on:", textKey);
// Show the "text" key in some way, for example:
//alert("Clicked on: " + textKey);
// }
//},
$(go.Panel,
new go.Binding("itemArray", "values", /*normalizeData*/),
{
itemTemplate: $(go.Panel, "Spot",
$(go.Shape,
{ fill: "#00000020", stroke: "white" },
new go.Binding("geometry", "", makeAnnularWedge),
new go.Binding("fill", "color")),
{
toolTip: $("ToolTip",
$(go.TextBlock,
new go.Binding("text", "", d => `${d.text}\n# ${d.value}\n${(d.sweep / 3.60).toFixed(1)} %`)))
}
)
}
),
$(go.TextBlock,
{ maxSize: new go.Size(2 * Inner, 2 * Inner), font: data['inner_font'] },
new go.Binding("text")),
{
click: (e, obj) => {
//let clickdata=e;
console.log(e);
}
}
);
myDiagram.model = new go.GraphLinksModel(
// "nodes":
[
{
"key": 1,
"text": "57.00 - Start",
"values": [
{
"value": 7,
"color": "green",
"text": "Completed"
},
{
"value": 0,
"color": "black",
"text": "Dropped Out"
},
{
"value": 0,
"color": "black",
"text": "Present"
}
]
},
{
"key": 1,
"text": "56.00 - complete",
"values": [
{
"value": 0,
"color": "green",
"text": "Completed"
},
{
"value": 10,
"color": "black",
"text": "Dropped Out"
},
{
"value": 0,
"color": "black",
"text": "Present"
}
]
}
]
);
</script>
</body>
</html>