Question

我正在尝试更新使用基于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);
};

Librairies

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

Answer 1

如何改变你清理画布的方式？

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

};

Answer 2

我希望这可以帮助某人，我有一个非常类似的问题，在我的页面上有2 jsphylo树（一个正常和一个圆形），我试图清除并再次渲染树，但这不起作用与jsphylo一起，我认为这是一个图书馆问题。

但是你可以做的，如果你不想重新加载整个页面，只需在你的页面上添加2个div并预先渲染树。比使用js在它们之间切换。

js：

        $("#switchView").click(function(){
            if ($("#svgCanvasCircular").is(":visible")){
                $("#svgCanvas").show();
                $("#svgCanvasCircular").hide();
            }else{
                $("#svgCanvas").hide();
                $("#svgCanvasCircular").show();
            }
        });

HTML：

<button id="switchView">show circular/rectangular tree</button>    
<div id="svgCanvas"> </div>
<div id="svgCanvasCircular" style="display:none;"> </div>

Answer 3

我自己也有同样的问题，因为这个问题似乎没有在网上解决，我花时间写一个小的创可贴脚本（使用jQuery）尝试将图像放回到正确的位置。

我已将其发布在pastebin

上

如果您一次在页面上有多个SVG，则需要将jQuery更改为仅访问您的（例如，如果它位于包含id="tree"的div中，请将$('svg...)更改为{{ 1}}。

这是我第一次使用Javascript更改SVG，所以我不得不承认我可能没有以最有效的方式完成它。

为什么图的底部会被切断？

关于MVCE

一些代码

3 个答案: