GoJs节点的高亮选择

2023-10-28 20:21:31

在数据可视化的领域，图形的使用越来越普遍。特别是当数据量大时，图形可以帮助我们直观地理解和探索复杂的关系。GoJs是一个功能强大的JavaScript库，用于创建交互式图表和图形。它提供了一系列特性，包括节点选中高亮，这对于交互式数据探索至关重要。

节点选中高亮的重要性

在可视化图形中，节点选中高亮允许用户通过突出显示选定的节点来专注于特定数据点或元素。这在以下情况下特别有用：

数据探索： 通过选择不同的节点，用户可以探索数据并识别模式和趋势。
交互式图表： 选中高亮使交互式图表成为可能，用户可以单击或触控节点来触发操作，例如显示详细信息或执行操作。
视觉辅助： 高亮的节点可以帮助用户快速识别重要数据点，并避免在复杂图形中迷失方向。

GoJs中的节点选中高亮

GoJs提供了强大的API，可以轻松实现节点选中高亮。以下步骤概述了如何实现：

1. 创建一个Diagram

GoJs的基本组件是一个Diagram，它表示整个图形。创建一个新的Diagram，并将其分配给变量diagram：

var diagram = new go.Diagram("myDiagramDiv");

2. 定义节点模板

节点模板定义了单个节点的外观和行为。要启用选中高亮，我们需要定义一个带有选中状态的高亮填充色的节点模板：

diagram.nodeTemplate =
{
    selectionAdorned: true,
    selectionObjectName: "SHAPE",
    selectionFill: "lightblue"
};

3. 添加节点数据

接下来，将数据添加到图表中。节点数据是一个JavaScript对象数组，每个对象表示一个节点：

var nodeData = [
    { key: "Node1", text: "节点 1" },
    { key: "Node2", text: "节点 2" },
    { key: "Node3", text: "节点 3" }
];
diagram.model.nodeDataArray = nodeData;

4. 运行图表

最后，运行图表以显示节点并启用选中高亮：

diagram.layout = new go.LayeredDigraphLayout();
diagram.initialContentAlignment = go.Spot.Center;
diagram.initialDocumentSpot = go.Spot.Center;

实例代码

以下是一个完整的示例代码，演示了如何使用GoJs实现节点选中高亮：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <script src="go.js"></script>
</head>
<body>
    <div id="myDiagramDiv" style="width: 100%; height: 500px;"></div>
    <script>
        var diagram = new go.Diagram("myDiagramDiv");

        diagram.nodeTemplate =
        {
            selectionAdorned: true,
            selectionObjectName: "SHAPE",
            selectionFill: "lightblue"
        };

        var nodeData = [
            { key: "Node1", text: "节点 1" },
            { key: "Node2", text: "节点 2" },
            { key: "Node3", text: "节点 3" }
        ];
        diagram.model.nodeDataArray = nodeData;

        diagram.layout = new go.LayeredDigraphLayout();
        diagram.initialContentAlignment = go.Spot.Center;
        diagram.initialDocumentSpot = go.Spot.Center;
    </script>
</body>
</html>