javascript — граф, созданный arbor, не показан
Я хочу использовать arbor для создания графа в файле HTML. Я пишу коды ниже, но ничего не показываю на холсте
<html>
<head>
<title>graph</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="arbor.js"></script>
<script type="text/javascript" src="graphics.js"></script>
<script type="text/javascript" src="renderer.js"></script>
</head>
<body>
<canvas id="viewport" width="800" height="600" style="background-color: yellow"></canvas>
<script src="jquery.js"></script>
<script language="javascript" type="text/javascript">
var sys = arbor.ParticleSystem(1000, 400, 1);
sys.parameters({
gravity: true
});
sys.renderer = Renderer("#viewport");
var data = {
nodes: {
animals: {
'color': 'red',
'shape': 'dot',
'label': 'Animals'
},
dog: {
'color': 'green',
'shape': 'dot',
'label': 'dog'
},
cat: {
'color': 'blue',
'shape': 'dot',
'label': 'cat'
}
},
edges: {
animals: {
dog: {},
cat: {}
}
}
};
sys.graft(data);
</script>
<!--script src="test.js"></script-->
</body>
</html>Решение
за исключением того, что jquery загружается дважды, ваш код выглядит нормально. Так что проблема может быть с файлами. Просто проверьте, находятся ли ваши файлы js в той же директории, что и ваш html. Следующий код работает для меня
<!DOCTYPE html>
<html>
<head>
<title>graph</title>
<script src="jquery.js"></script>
<script src="arbor.js"></script>
<script src="graphics.js"></script>
<script src="renderer.js"></script>
</head>
<body>
<canvas id="viewport" width="800" height="600"></canvas>
<script language="javascript" type="text/javascript">
var sys = arbor.ParticleSystem(1000, 400, 1);
sys.parameters({
gravity: true
});
sys.renderer = Renderer("#viewport");
var data = {
nodes: {
animals: {
'color': 'red',
'shape': 'dot',
'label': 'Animals'
},
dog: {
'color': 'green',
'shape': 'dot',
'label': 'dog'
},
cat: {
'color': 'blue',
'shape': 'dot',
'label': 'cat'
}
},
edges: {
animals: {
dog: {},
cat: {}
}
}
};
sys.graft(data);
</script>
</body>
</html>
Другие решения
Других решений пока нет …