本文介绍了如何使用JsPlumb库在项目中建立数据仓库表的关联关系展示。首先，展示了初始化JsPlumb的代码，包括设置连线类型、拖动选项、端点样式等。接着，通过添加点、端口和连线来创建表结点，并实现了点击事件、连接事件以及避免相同节点连线的功能。此外，还详细解释了拖拽表到设计区、添加表结点、设置输入输出点以及根据输入输出进行连线的步骤，以便于实现动态的表关联可视化。
项目背景：项目上需要通过JsPlumb连线库表示两个表的关联关系，效果图如下：
左侧为数据仓库中的表分类，右侧上为模型设计区，下为数据预览区。
下面展示jsPlumb的初始化代码
jsPlumb.ready(function() {
var color = "#E8C870";
var instance = jsPlumb.getInstance({
Connector : [ "Flowchart", { curviness:50 } ],//连线类型，有直线，折线等，我这只用直线
DragOptions : { cursor: "pointer", zIndex:2000 },//拖动的时候
PaintStyle : { strokeStyle:color, lineWidth:2 },
EndpointStyle : { radius:5, fillStyle:color },
HoverPaintStyle : {strokeStyle:"#7073EB" },
EndpointHoverStyle : {fillStyle:"#7073EB" },
ConnectionOverlays:[
[ "Label", { label:"关联",cssClass:&#
最低0.47元/天 解锁文章
扫一扫
5526
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
