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

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

javascript css twitter-bootstrap svg

Javascript 使用treant.js绘制的流程图没有响应,javascript,css,twitter-bootstrap,svg,Javascript,Css,Twitter Bootstrap,Svg,我使用treant.js和JSON绘制了一个组织流程图。生成的SVG元素（隐式创建）被放置在一个响应div元素（使用引导的容器流体类）中。但是流程图没有响应。请帮我解决这个问题 <!DOCTYPE html> <html> <head> <title>SVGResponsive</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/aja

我使用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>

根元素需要具有有效值的viewBox属性才能响应。我尝试将viewBox属性添加到隐式创建的svg中。但它仍然不负责任…是否有其他方法？就是这样。如果您需要更多帮助，请提供帮助。@RobertLongson我现在已经编辑了代码根元素需要一个具有有效值的viewBox属性才能响应。我尝试将viewBox属性添加到隐式创建的svg中。但这仍然是不负责任的……是否有其他方法？就是这样。如果需要更多帮助，请提供帮助。@RobertLongson我现在已经编辑了代码

{
  "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"
        }
      }
    ]
  }
}