如何为Telerik Kendo Diagram的Connections配置Schema？

Kendo Diagram 的 Connections 数据源完全支持通过 Schema 来映射自定义属性，只是官方示例较少提及这一点。你可以像配置 Shapes 的 Schema 一样，给 Connections 的独立数据源设置 Schema 规则，解决数据库字段与 Kendo 默认字段不匹配的问题。

具体实现步骤 #

1. 为 Connections 单独配置 DataSource，在其中定义 Schema 规则，将数据库返回的字段映射到 Kendo Diagram 要求的默认字段：

   • Connections 的核心默认字段为 from（源形状 ID）和 to（目标形状 ID）
   • 如果有连接文本、自定义样式等额外属性，也可在 Schema 的 model 中完成映射

2. 示例代码：
   假设你的数据库返回的连接数据结构如下：

// 数据库返回的连接数据
const connectionData = [
  { sourceNode: 1, targetNode: 2, linkDesc: "关联关系", lineColor: "#ff0000" },
  { sourceNode: 2, targetNode: 3, linkDesc: "依赖关系", lineColor: "#00ff00" }
];

对应的 Connections 数据源及 Schema 配置如下：

$("#diagram").kendoDiagram({
  shapes: {
    // 已生效的形状数据源及 Schema 配置
    dataSource: {
      data: shapeData,
      schema: {
        model: {
          id: "nodeId",
          fields: {
            nodeId: { from: "id" },
            nodeName: { from: "name" }
          }
        }
      }
    },
    template: "#= data.nodeName #"
  },
  connections: {
    // 为 Connections 单独配置数据源与 Schema
    dataSource: {
      data: connectionData,
      schema: {
        model: {
          fields: {
            // 映射源/目标ID到Kendo默认的from/to
            from: { from: "sourceNode" },
            to: { from: "targetNode" },
            // 映射自定义文本字段到Kendo的text属性
            text: { from: "linkDesc" },
            // 映射自定义颜色字段
            lineColor: { from: "lineColor" }
          }
        }
      }
    },
    // 利用映射后的字段设置连接样式
    stroke: {
      color: "#= data.lineColor #"
    }
  }
});

注意事项 #

• 不要将 Connections 的 Schema 嵌套在 Shapes 的数据源配置中，必须为 Connections 配置独立的 DataSource
• 确保 from 和 to 映射后的字段值，与 Shapes 数据源中定义的 id 字段值完全匹配，否则连接无法正确渲染

内容的提问来源于stack exchange，提问作者Wladislaw Kusnezow