给定一个像这样的 HTML 结构:
<div id="canvas">
<div class="group group-normal" id="1">hello world</div>
<div class="group group-infiltrated" id="2">whats up dogue</div>
</div>
我目前使用 jsPlumb 从该结构创建图表:
$(function() {
jsPlumb.Defaults.Container = $("div#canvas");
jsPlumb.draggable($("div.group"), {
containment: $("div#canvas")
});
var stateMachineConnector = {
connector: "Bezier",
paintStyle: { lineWidth: 2, strokeStyle: "#056" },
endpoint: "Blank",
anchor: "Continuous",
overlays:[ ["PlainArrow", { location: 1, width: 15, length: 12 } ]]
};
jsPlumb.connect({
source: "1",
target: "2"
}, stateMachineConnector);
});
这已经给了我一个漂亮的、可拖动的图表:
问题是,在初始化图形时,所有 div
都位于 Canvas 的左上角。我了解到这是因为 jsPlumb 只提供布局图形的功能,但不提供定位图形的功能。
然后我进行了寻宝游戏,发现了许多处理定位的有用库,例如 springy、sigma 等。问题是:大多数不对 div 进行操作,而是对某些(对我而言)不透明的 SVG/Canvas 对象图进行操作。
我非常喜欢 jsPlumb,并希望继续使用它。我唯一需要从其他库中获得的是所有元素的初始定位。
如何让元素在可用空间内更均匀地放置,甚至可以让它们每次初始化图形时都以相同的方式排列?
最佳答案
这是用于定位具有连接性的 DIV 的插件:https://github.com/lndb/jsPlumb_Liviz.js 基本上插件是从 graphviz 派生的 js库。
您需要通过文本区域(id=dot-src) 将连接信息传递给库。因此,无论何时建立连接,都将连接信息存储在一个字符串中,然后将其传递给 Liviz 库以进行定位。
str='digraph MyGraph {'; // This string will be set to the textarea at the end.
// Whenever connection is created update the string.
jsPlumb.bind("jsPlumbConnection", function(ci) {
console.log($('#'+ci.sourceId).data("prop").dn+"->"+$('#'+ci.targetId).data("prop").dn);
str+=ci.sourceId+"->"+ci.targetId+";";
});
// At the end set the string and call Liviz function
$('#dot-src').text(str+"}"); // Set the string
w_launch(); // call the library to position the DIV's based on connectivity.
您可以探索 graphviz 针对不同类型的选项来自定义定位。
关于javascript - 为给定的 div 结构强制驱逐库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22038228/