标签: jsplumb
有什么替代jsPlumb？(用于连接DOM元素)
我正在制作一个甘特项目管理系统,我正在尝试将UI的DOM元素连接在一起,就像在这个jsPlumb演示中一样:
但是,我不太喜欢jsPlumb.我搜索了替代品,但找不到任何替代品.
您建议使用任何jsPlumb替代品吗？
推荐指数
解决办法
查看次数
jsPlumb:如何使流程图连接器避免交叉元素？
是否可以使jsPlumb流程图连接器不跨越可连接的项目或指定的元素(在示例中:带有'item'类的元素)？
默认流程图行为:
期望的结果:
这是我试过的:
编辑澄清
HTML
<div id="root">
<div class="item" id="item1">Item 1</div>
<div class="item" id="item2">Item 2</div>
<div class="item" id="item3">Item 3</div>
<div class="item" id="item4">Item 4</div>
<div class="item" id="item5">Item 5</div>
</div>
JS
jsPlumb.connect({
source: $('#item2'),
target: $('#item7'),
anchors: [ "Continuous" ],
connector:[ "Flowchart" ],
paintStyle: {
strokeStyle: "#000000",
lineWidth:1
}
});
基本上让jsPlumb引擎(SVG或canvas)知道相关的DOM元素并有一个避免对象的方案
推荐指数
解决办法
查看次数
有一个简单但有用的jquery.JsPlumb示例吗？
在过去的一周里,我一直在寻找一些图形可视化的javascript库,我偶然发现了jsPlumb,它是根据我见过的例子来判断的,这是迄今为止我见过的最好看和最先进的库.文档虽然很大,但并不是很有帮助,因为我无法弄清楚如何实际执行最重要的任务.
我的问题清单包括:
- 如何告诉图表使用DOM-Tree的预定义元素？
- 这些元素的哪一部分将被展示？
- 虽然连接很容易,但如何定义对齐？
虽然这些问题仍然存在,但有一些例子,但它们要么简单易用(参见示例1),要么它们非常复杂甚至检索(下载不是问题,但我不是'我真的想在玩一些库之前分析一切......)代码至少对我来说是不可能的(参见https://github.com/sporritt/jsPlumb/tree/master/demo).
例1
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js">
</script>
<script type="text/javascript"
src="PATH_TO/jquery.jsPlumb-1.3.15-all-min.js ">
</script>
<script type="text/javascript">
jsPlumb.bind("ready", function() {
var e0 = jsPlumb.addEndpoint("container0"),
e1 = jsPlumb.addEndpoint("container1");
jsPlumb.connect({ source:e0, target:e1 });
});
</script>
</head>
<body>
<div id="container0">
</div>
<div id="container1">
</div>
</body>
结果如何
谁能给我一个回答我问题的例子？
提前致谢.
推荐指数
解决办法
查看次数
保存并加载jsPlumb流程图,包括精确的锚点和连接
这是我正在构建的流程图编辑器的jsFiddle.
这是使用"添加决策"+"添加任务",连接和移动元素可以轻松创建的示例.
现在是困难的部分:我希望能够保存并加载确切的流程图.为此,我开始在Stackoverflow 上使用类似的线程.
为此,我添加了"保存"和"加载"按钮,用于将流程图导出/导入JSON(在保存后显示在jsFiddle中的textform中 - 相同的textform可用于加载).
该保存功能:
function saveFlowchart(){
var nodes = []
$(".node").each(function (idx, elem) {
var $elem = $(elem);
var endpoints = jsPlumb.getEndpoints($elem.attr('id'));
console.log('endpoints of '+$elem.attr('id'));
console.log(endpoints);
nodes.push({
blockId: $elem.attr('id'),
nodetype: $elem.attr('data-nodetype'),
positionX: parseInt($elem.css("left"), 10),
positionY: parseInt($elem.css("top"), 10)
});
});
var connections = [];
$.each(jsPlumb.getConnections(), function (idx, connection) {
connections.push({
connectionId: connection.id,
pageSourceId: connection.sourceId,
pageTargetId: connection.targetId
});
});
var flowChart = {};
flowChart.nodes = nodes;
flowChart.connections = connections;
flowChart.numberOfElements = numberOfElements; …推荐指数
解决办法
查看次数
如何防止在族树生成器中重叠？
我正在创建一个交互式家谱树创建者,不像更简单的版本,它是简单的谱系图表/树.
我的要求(基于familyecho.com)是:
- 多个合作伙伴与您通常看到的简单2父母对1个孩子.
- 多个兄弟姐妹
- 伙伴们不一定需要生孩子
- 并不总是必须是父母"对",只有一个父亲/母亲
我遇到的问题是:我正在根据"当前"节点/家庭成员生成偏移量,当我越过第一代时,例如2个父母,它重叠.
重叠的示例以及未在同一X轴上绘制的伙伴:
这是我遇到问题的实际app和主js文件.这里是一个简化的jsfiddle我创建演示父/偏移问题,但我真的要解决重叠这个一般,除了确保合作伙伴绘制在同一x轴的其他合作伙伴.
我怎样才能解决这个问题以及未来可能发生的重叠冲突？我是否需要某种重绘功能来检测碰撞并在检测到时调整每个块的偏移？我试图让它无缝,所以重绘的次数有限.
计算相对于"上下文"或当前节点的偏移量的示例:
var offset = getCurrentNodeOffset();
if ( relationship == RELATIONSHIPS.PARTNER ) {
var t = offset.top; // same level
var l = offset.left + ( blockWidth + 25 );
} else {
var t = offset.top - (blockHeight + 123 ); // higher
var l = offset.left - ( blockWidth - 25 );
}
推荐指数
解决办法
查看次数
在jsPlumb上保存并加载流程图
在jsPlumb上保存和加载流程图的最佳方法是什么？
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
jsPlumb - 每侧的动态端点锚点
我试图弄清楚如何动态地将端点锚添加到jsPlumb容器.
我想在左侧有源端点,在右侧只有目标端点.
问题是,我没有找到任何方法这样做,没有像我现在那样诉诸某些黑客.
jsPlumb支持连续锚点,但是将根据连接器之间的方向和连续锚点的数量重新计算单个锚点的位置.这意味着源端点和目标端点可以共享容器的同一侧,这是我想要避免的.
这是我自己用来破解和重新计算锚位置的代码的一部分(当点击添加按钮时),带有一些错误的结果:(
function fixEndpoints(endpoints) {
//there are 2 types - input and output
var inputAr = $.grep(endpoints, function (elementOfArray, indexInArray) {
return elementOfArray.isSource; //input
});
var outputAr = $.grep(endpoints, function (elementOfArray, indexInArray) {
return elementOfArray.isTarget; //output
});
calculateEndpoint(inputAr, true);
calculateEndpoint(outputAr, false);
}
function calculateEndpoint(endpointArray, isInput) {
//multiplyer
var mult = 1 / endpointArray.length;
for (var i = 0; i < endpointArray.length; i++) {
if (isInput) {
endpointArray[i].anchor.x = 1;
endpointArray[i].anchor.y = …推荐指数
解决办法
查看次数
AngularJS - 如何避免使用$ timeout来等待创建元素？
这是一个想法:
所以我试图使用外部库函数在我的ng-repeat所连接的控制器中的DOM中创建一些操作.
最新的jsFiddle工作,但......
http://jsfiddle.net/GeorgiAngelov/KRbdL/150/
所以基本上我得到它与@ BrandonTilley的帮助,但我试图避免使用$ timeout,因为我认为这不是一个可行的解决方案,而是一个黑客.
在@BrandonTilley的帮助下,新的小提琴
添加了onload监听器,我也试图通过getElementById获取新元素或其父元素,但它返回的只是NULL.
http://jsfiddle.net/GeorgiAngelov/KRbdL/143/
问题如下:我在我的控制器中调用了外部函数,它将元素添加到ng-repeat数组中,这在术语中将新元素添加到DOM中.但是,当我在控制器内部时,该元素尚不存在,即使我已将其添加到数组中.
一旦元素实际上被附加到DOM,而不是实际添加到控制ng-repeat的数组中,我如何绑定要调用的外部函数？
问题是我有模板1调用模板2,然后模板2调用template3然后template3调用模板2,我想在template3完成渲染template2后将template3中的元素连接到template2.
我创建了一个链接到template3的指令,我使用了$ last属性,但它仍然无法工作,因为template3加载但我不知道template2何时完成加载.此外,element.ready()甚至没有启动.我也尝试使用$ timeout和删除element.ready进行黑客攻击,但它仍然给了我一个错误,即子元素还没有存在.我不想使用$ timeout,所以我正在为我的问题寻找更实用的解决方案.
另外,当我调用函数来创建一个新的firstlevel元素时,我尝试调用jsPlumb库,但是它给了parentNode undefined.我在addChild函数中对它进行了评论.
在ng-repeat ng-include = template2上的模板3中使用的指令
app.directive('vectorDrawDirective', function($timeout) {
return function($scope, element, attrs) {
//angular.element(element).css('color','blue');
if ($scope.$last === true) {
element.ready(function() {
jsPlumb.connect({
source: $scope.firstlevel.parent_id,
target: $scope.firstlevel.id,
});
jsPlumb.repaintEverything();
})
}
}
});
这是我用来帮助您想象我想要实现的内容的图表(查看右上角的文字)
jsplumb angularjs angularjs-directive angularjs-service angularjs-controller
推荐指数
解决办法
查看次数
如何在JsPlumb中与边缘建立连接？
如何设置一个JsPlumb连接,该连接在中间分割并转到多个端点,如下图所示？
答:用一个连接连接两个端点:
B:使用一个连接连接两个端点:
C:使用一个连接连接三个端点:
编辑:使用FlowChart选项,我得到一个小点的奇怪错误,请参见下图.
推荐指数
解决办法
查看次数