gpt4 book ai didi

javascript - 将元素插入到 div 意味着 Java Script sigma.js 库

转载 作者:行者123 更新时间:2023-11-30 17:47:39 25 4
gpt4 key购买 nike

我正在测试 Java 脚本 library for graphs visualization .根据介绍性文档,我尝试在网页上制作一个简单的图形显示。

这是文档所说的:

Easy to use
Here is the minimal code to create an instance:

var sigRoot = document.getElementById('sig');
var sigInst = sigma.init(sigRoot);
sigInst.addNode('hello',{
label: 'Hello',
color: '#ff0000'
}).addNode('world',{
label: 'World !',
color: '#00ff00'
}).addEdge('hello_world','hello','world').draw();

这是我的 HTML 网页:

<!DOCTYPE html>

<html>

<head>
<title>Testing graphs</title>
<script src="sigma.min.js"></script>
<script src="jquery1102.js"></script>
</head>

<body>

<div id="sig"></div>

<script type="text/javascript">

window.onload = loadGraph();

function loadGraph () {

var sigRoot = document.getElementById('sig');
var sigInst = sigma.init(sigRoot);
sigInst.addNode('hello',{
label: 'Hello',
color: '#ff0000'
}).addNode('world',{
label: 'World !',
color: '#00ff00'
}).addEdge('hello_world','hello','world').draw();
}
</script>

</body>
</html>

因此,我假设图形将显示在某些 div 区域并在页面加载后执行。但是,什么也没有显示,控制台也没有声称有任何错误。我什至需要使用 HTML5 Canvas 吗?

最佳答案

它可以工作,但您需要为包含图形的 div 提供高度和宽度。

<div id="sig" style="width:500px;height:500px;border:1px solid black"></div>

其次,简单的例子不是很好,因为两个节点会被放置在彼此之上。因此,您可能还想为每个节点提供 x 和 y 属性。

sigInst.addNode('hello',{
label: 'Hello',
color: '#ff0000',
x: Math.random(),
y: Math.random()
}).addNode('world',{
label: 'World !',
color: '#00ff00',
x: Math.random(),
y: Math.random()
}).addEdge('hello_world','hello','world').draw();

这是一个 jsfiddle:

关于javascript - 将元素插入到 div 意味着 Java Script sigma.js 库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19792171/

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