gpt4 book ai didi

javascript - 有一个简单但有用的 jquery.JsPlumb 示例吗?

转载 作者:行者123 更新时间:2023-12-03 21:46:29 24 4
gpt4 key购买 nike

上周我一直在寻找一些图形可视化 javascript 库,我偶然发现了 jsPlumb ,从我见过的例子来看,这是我迄今为止见过的最好看、最先进的库。该文档虽然相当大,但不是很有帮助,因为我无法弄清楚如何实际执行最基本的任务。

我的问题 list 包括:

  • 如何告诉图表使用 DOM 树的预定义元素?
  • 将显示这些元素的哪一部分?
  • 虽然建立连接很容易,但如何定义对齐方式?

虽然这些问题仍然存在,但还是有一些示例,但它们要么太简单而没有任何用处(参见示例 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>

结果是 Screenshot of Example 1

任何人都可以给我一个可以回答我的问题的示例吗?

提前致谢。

最佳答案

尝试在结束头标记之前添加此内容...

<style type="text/css">
#container0, #container1 {
float: left;
height: 100px;
width: 100px;
border: 1px solid black;
margin: 10px;
}
</style>

关于javascript - 有一个简单但有用的 jquery.JsPlumb 示例吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13011230/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com