javascript - 对于 Dracula 图形库“未找到 SVG 容器”出现此错误,我该怎么办?
问题描述
我正在尝试使用 Dracula Graph Libary 制作一个简单的网页,但我不断收到错误消息“未找到 SVG 容器”。在 Chrome 控制台中。我正在使用 Dracula 主页 ( https://www.graphdracula.net/ ) 中的代码,请告诉我如何解决此问题。谢谢你。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/graphdracula/1.2.1/dracula.min.js"></script>
<script type="text/javascript">
var g = new Dracula.Graph();
g.addEdge("strawberry", "cherry");
g.addEdge("strawberry", "apple");
g.addEdge("strawberry", "tomato");
g.addEdge("tomato", "apple");
g.addEdge("tomato", "kiwi");
g.addEdge("cherry", "apple");
g.addEdge("cherry", "kiwi");
var layouter = new Dracula.Layout.Spring(g);
layouter.layout();
var renderer = new Dracula.Renderer.Raphael('canvas', g, 400, 300);
renderer.draw();
</script>
</head>
<body>
<div id="canvas"></div>
</body>
</html>
解决方案
刚刚遇到同样的问题......我通过改变解决了它
var renderer = new Dracula.Renderer.Raphael('canvas', g, 400, 300);
至
var renderer = new Dracula.Renderer.Raphael(document.getElementById('canvas'), g, 400, 300);
这是一个工作的jsfiddle:https ://jsfiddle.net/millerh1/Lf1nspx3/
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/graphdracula/1.2.1/dracula.min.js"></script>
<div id="canvas"></div>
<script>
var g = new Dracula.Graph();
g.addEdge("strawberry", "cherry");
g.addEdge("strawberry", "apple");
g.addEdge("strawberry", "tomato");
g.addEdge("tomato", "apple");
g.addEdge("tomato", "kiwi");
g.addEdge("cherry", "apple");
g.addEdge("cherry", "kiwi");
var layouter = new Dracula.Layout.Spring(g);
layouter.layout();
var renderer = new Dracula.Renderer.Raphael(document.getElementById('canvas'), g, 400, 300);
renderer.draw();
</script>
推荐阅读
- python - suds & python3: TypeError: XXXXX got an unexpected keyword argument '__inject'
- monaco-editor - 如何动态更改 monaco-editor 实例中使用的语言?
- javascript - yield如何作为javascript中的参数工作
- azure-aks - Fluent Bit 无法访问 Azure Log Analytics 的 DNS
- python-3.x - 按项目过滤的新字典
- c# - 将javascript数组导入MVC
- git - 使用 libsecret 存储 git 凭据:未找到 org.freedesktop.Secret.Collection 接口
- sql - 我正在尝试将 Col1 作为列表的值返回,IF Col2 = NULL
- liquid - 将流式语法更改为 nunjucks - 这是正确的吗?
- javascript - 在 Vue.js 中使用 emscripten 编译的 C++ 库