Thiết kế website giá rẻ

Question

in a severe procrastination attack from med school studies, I decided to build a graph that shows the approach to anemia as a decision tree. It has some links in the nodes and tooltips on mouse hover in some nodes.
The problem is, it shows an empty tooltip even if hoverText is not defined in the node template, and even worse, if it’s not defined it shows the last tooltip text the mouse hovered over.
I’m not a JS programmer, so clearly I’m doing something wrong here, can you help me fix this code?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Approach to Anemia</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.1.54/go.js"></script>
    <style>
        #myDiagramDiv {
            width: 100%;
            height: 600px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="myDiagramDiv"></div>
    <script>
        function init() {
            const $ = go.GraphObject.make;

            const myDiagram = $(go.Diagram, "myDiagramDiv",
                {
                    initialAutoScale: go.Diagram.Uniform,
                    layout: $(go.TreeLayout, { angle: 90, layerSpacing: 35 })
                });

            myDiagram.nodeTemplate =
                $(go.Node, "Auto",
                    $(go.Shape, "RoundedRectangle", { strokeWidth: 2, stroke: "steelblue", fill: "white" }),
                    $(go.TextBlock,
                        {
                            margin: 8,
                            font: "bold 12px sans-serif",
                            isMultiline: false,
                            wrap: go.TextBlock.WrapFit
                        },
                        new go.Binding("text", "name"),
                        new go.Binding("stroke", "url", function(url) { return url ? "blue" : "black"; })),
                    {
                        toolTip: $(go.Adornment, "Auto",
                            $(go.Shape, { fill: "lightyellow" }),
                            $(go.TextBlock, { margin: 4 },
                                new go.Binding("text", "hoverText"))
                        ),
                        click: (e, obj) => {
                            const url = obj.part.data.url;
                            if (url) window.open(url, "_blank");
                        }
                    }
                );

            myDiagram.linkTemplate =
                $(go.Link, { routing: go.Link.Orthogonal, corner: 5 },
                    $(go.Shape, { strokeWidth: 2, stroke: "#ccc" }));

            const nodeDataArray = [
                { key: 1, name: "Anemia", hoverText: "Hgb < 13.2 g/dL men < 11.6 g/dL women" },
                { key: 7, parent: 1, name: "Reticulocytes", url: "https://en.wikipedia.org/wiki/Reticulocyte", hoverText: "Determine if the anemia is hypoproliferative or hyperproliferative" },
                { key: 8, parent: 7, name: "Hyperproliferative Anemia", hoverText: "> 2% reticulocytes" },
                { key: 9, parent: 7, name: "Hypoproliferative Anemia", hoverText: "< 2% reticulocytes" },
                { key: 2, parent: 9, name: "Blood count" },
                { key: 3, parent: 2, name: "Iron deficiency", hoverText: "Ferritin < 12 ug/L" },
                { key: 4, parent: 2, name: "Other results" },
                { key: 5, parent: 3, name: "Iron deficiency anemia", url: "https://en.wikipedia.org/wiki/Iron_deficiency_anemia" },
                { key: 6, parent: 4, name: "Other type of anemia" },
                { key: 10, parent: 8, name: "Hemolysis?" },
                { key: 11, parent: 10, name: "No" },
                { key: 12, parent: 11, name: "Bleeding" },
                { key: 13, parent: 10, name: "Yes", hoverText: "LDHu2191, BUu2191, Hpu2193" },
                { key: 14, parent: 13, name: "Blood smear", url: "https://en.wikipedia.org/wiki/Blood_smear" },
                { key: 15, parent: 14, name: "Schistocytes", url: "https://en.wikipedia.org/wiki/Schistocyte" },
                { key: 16, parent: 14, name: "Spherocytes / Elliptocytes / Stomatocytes" },
                { key: 17, parent: 14, name: "Thalasemia / Sickle cell" },
                { key: 18, parent: 14, name: "Bite cells" },
                { key: 19, parent: 14, name: "Normal" }
            ];

            myDiagram.model = new go.TreeModel(nodeDataArray);

            myDiagram.toolManager.mouseMoveTools.insertAt(2, $(CustomTooltipTool));
        }

        function CustomTooltipTool() {
            go.Tool.call(this);
        }
        go.Diagram.inherit(CustomTooltipTool, go.Tool);

        init();
    </script>
</body>
</html>

Thiết kế website giá rẻ

Danh mục

How to make GoJS tooltips appear only in some nodes?