3

我正在尝试使用 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>
4

1 回答 1

1

刚刚遇到同样的问题......我通过改变解决了它

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>

于 2020-07-27T23:37:54.677 回答