javascript - 为什么将图的底部切除？

我试图更新使用基于jsphylosvg library的raphaeljs创建的图形。 jsphylosvg论坛上的tried to clear and reload a tree人和其他asked about multiple svg人，但是他们没有得到任何答案。我更进一步，并通过清除div的HTML内容并重新实例化树来设法重新加载树。但是，当实例化另一棵树时，该图仍然会被切除-即使没有清除：

Try it on CodePen
编辑：

知道为什么会这样吗？

谢谢！

关于MVCE

上面的CodePen Playground（下面的代码）是我能提供的最好的MVCE。它由两棵组成的树组成：咖啡树和茶树。最终目标是仅显示茶树（应立即清除咖啡树）。但是现在我什至不能正确地并排显示这两棵树：茶树在底部被切除（如上图所示）。我在这里的主要观点是试图了解这种中断的原因以及解决方法。

一些代码

万一链接断开。

的HTML

<body>
    <div id="svgCanvas"></div>
</body>

的JavaScript

window.onload = function() {
  var coffee = {
    newick: '(((Espresso:2,(Milk Foam:2,Espresso Macchiato:5,((Steamed Milk:2,Cappuccino:2,(Whipped Cream:1,Chocolate Syrup:1,Cafe Mocha:3):5):5,Flat White:2):5):5):1,Coffee arabica:0.1,(Columbian:1.5,((Medium Roast:1,Viennese Roast:3,American Roast:5,Instant Coffee:9):2,Heavy Roast:0.1,French Roast:0.2,European Roast:1):5,Brazilian:0.1):1):1,Americano:10,Water:1);'
  };

  var tea = {
    newick: '(((White:2,(Green:2,Oloong:5,((Black:2,Herbal:2,(Rooibos :1,Mate :1,Blooming :3):5):5,Blends:2):5):5):1, Fermented:0.1,(Chifir:1.5,((Iced:1,Lahpet:3,Thai:5,Yellow:9):2,Honey:0.1,British:0.2,Pu-erh:1):5,Peppermint:0.1):1):1,Chamomile:10,Ginger:1);'
  };

  coffee_canvas = new Smits.PhyloCanvas(
    coffee,
    'svgCanvas',
    500, 500);

  // Unsuccessful attempts at clearing the canvas

  /** #1 Clearing the HTML in div: cut off when re-instantiated **/
  // document.getElementById('svgCanvas').innerHTML = "";

  /** ##2 Clearing the content of div in jQuery: cut off when re-instantiated **/
  // $('#svgCanvas').empty();

  /** #3 Clearing the canvas: TypeError, svgCanvas is a div not a canvas **/
  // var ctx = document.getElementById('svgCanvas').getContext('2d');
  // ctx.clearRect(0,0,500,500); // clear canvas

  tea_canvas = new Smits.PhyloCanvas(
    tea,
    'svgCanvas',
    500, 500);
};

图书馆

https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/master/raphael.min.js
https://cdn.rawgit.com/guyleonard/jsPhyloSVG/master/jsphylosvg-min.js

最佳答案

如何更改清除画布的方式？

      var ctx = document.getElementById('svgCanvas').getContext('2d');
      ctx.clearRect(0,0,500,500); // clear canvas

因此，总体而言，您的代码将如下所示：

  window.onload = function() {
  var dataObject = {
    newick: '(((Espresso:2,(Milk Foam:2,Espresso Macchiato:5,((Steamed Milk:2,Cappuccino:2,(Whipped Cream:1,Chocolate Syrup:1,Cafe Mocha:3):5):5,Flat White:2):5):5):1,Coffee arabica:0.1,(Columbian:1.5,((Medium Roast:1,Viennese Roast:3,American Roast:5,Instant Coffee:9):2,Heavy Roast:0.1,French Roast:0.2,European Roast:1):5,Brazilian:0.1):1):1,Americano:10,Water:1);'
  };
  phylocanvas = new Smits.PhyloCanvas(dataObject, 'svgCanvas', 500, 500);

  // uncomment the line below to clear the canvas
  //document.getElementById('svgCanvas').innerHTML = ""; // Do not use this one

  var ctx = document.getElementById('svgCanvas').getContext('2d');
  ctx.clearRect(0,0,500,500); // clear canvas

  phylocanvas = new Smits.PhyloCanvas(dataObject, 'svgCanvas', 500, 500);

};