引人注目的高亮效果：GoJs 鼠标事件的妙用

2023-09-24 11:12:38

赋予可视化生命：GoJs 鼠标事件

在当今数据驱动的世界中，有效地展示复杂信息至关重要。GoJs（GoJS）是一个功能强大的 JavaScript 库，可帮助您创建交互式图表、流程图和网络图。它提供了一系列鼠标事件，可用于动态修改节点和连线的样式，从而增加可视化图形的吸引力。

本文将重点介绍如何使用 GoJs 的鼠标事件来创建高亮效果。我们将深入探讨鼠标移入、移出和点击事件，展示如何使用这些事件来修改关联节点和连线的样式。通过这样做，我们将使您的可视化图形栩栩如生，并为用户提供更加直观的交互体验。

鼠标移入：点亮节点

鼠标移入事件允许您在用户将鼠标悬停在节点上时更改节点的样式。这对于强调特定节点或提供有关该节点附加信息很有用。GoJs 提供了 mouseEnter 和 mouseLeave 事件，您可以使用这些事件来实现此功能。

diagram.addDiagramListener("ObjectMouseEnter",
    function(e) {
        // 在节点上触发 mouseEnter 事件
        var node = e.subject;

        // 设置节点边框宽度
        node.updateTargetBindings("stroke", "blue");
        node.updateTargetBindings("strokeWidth", 3);

        // 更新节点颜色
        node.updateTargetBindings("fill", "#F0F0F0");
    }
);

鼠标移出：恢复节点样式

与鼠标移入事件相反，鼠标移出事件允许您在用户将鼠标移出节点时恢复节点的样式。这将创建一种交互式效果，让用户在悬停节点时清楚地看到所做的更改。

diagram.addDiagramListener("ObjectMouseLeave",
    function(e) {
        // 在节点上触发 mouseLeave 事件
        var node = e.subject;

        // 重置节点边框宽度
        node.updateTargetBindings("strokeWidth", 1);

        // 重置节点颜色
        node.updateTargetBindings("fill", "#FFFFFF");
    }
);

鼠标点击：高亮关联连线

除了修改节点样式外，鼠标点击事件还允许您修改关联连线的样式。这对于强调特定路径或提供有关该连线附加信息很有用。GoJs 提供了 click 事件，您可以使用该事件来实现此功能。

diagram.addDiagramListener("ObjectSingleClick",
    function(e) {
        // 在连线上触发单击事件
        var link = e.subject;

        // 设置连线颜色
        link.updateTargetBindings("stroke", "red");
        link.updateTargetBindings("strokeWidth", 5);

        // 添加连线箭头
        link.updateTargetBindings("toArrow", "Triangle");
        link.updateTargetBindings("toArrowScale", 2);
    }
);