javascript - 为什么图的底部被切掉了？-6ren

javascript - 为什么图的底部被切掉了？

转载作者：行者123 更新时间：2023-11-30 06:52:53

我正在尝试更新使用 jsphylosvg library 创建的图形这是基于 raphaeljs .有人tried to clear and reload a tree和其他人asked about multiple svg在 jsphylosvg 论坛上，但他们没有得到任何答案。我更进一步，通过清除 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.jshttps://cdn.rawgit.com/guyleonard/jsPhyloSVG/master/jsphylosvg-min.js

最佳答案

如何改变您清除 Canvas 的方式？

      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);

};

关于javascript - 为什么图的底部被切掉了？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30667884/