Question

我使用treant.js和JSON绘制组织流程图。生成的SVG元素（隐式创建）放置在响应div元素（使用容器 - 流体类引导程序）中。但流程图没有响应。请帮助我解决这个问题

<!DOCTYPE html>
<html>
<head>
    <title>SVGResponsive</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.css" integrity="sha256-oihWe0KdtBd8G96a/F7odmMuPQowZ9lsl1LZT7m51GM=" crossorigin="anonymous"/>
</head>
<body>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 tree">
                <div id="tree-simple">  
                        //the implicitly created SVG will go here I hope
                </div>
            </div>
        </div>  
    </div>

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open('GET','https://api.myjson.com/bins/1a1sdd',true);  //JSON file hosted in the cloud myjson.com
    xhr.send();

    xhr.onreadystatechange = function() {   

        if(xhr.readyState === 4 && xhr.status === 200)
            {
                var obj = JSON.parse(xhr.responseText);

                        var orgChart = new Treant(obj);
                        var res=document.getElementsByTagName('svg');
                        for(i=0;i<res.length;i++)
                        {
                            res[i].viewBox="0 0 6 5";   
                            res[i].style.width="100%";
                            res[i].style.height="100%";
                        }

            }           
    }
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.js" integrity="sha256-MPXjTSEImVJI1834JAHubdK7Lts1VTUPJmCQ9zKAjyA=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.js" integrity="sha256-znpgHNqR9Hjjydllxj3UCvOia54DxgQcIoacHEXUSLo=" crossorigin="anonymous"></script>
</body>
</html>

JSON文件：

{
  "chart": {
    "container": "#tree-simple"
  },
  "nodeStructure": {
    "image": "https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg",
    "children": [
      {
        "text": {
          "name": "First child"
        }
      },
      {
        "text": {
          "name": "Second child"
        }
      }
    ]
  }
}

使用treant.js绘制的流程图没有响应

0 个答案: