将d3.js嵌入web2py引导页面

下面是我如何在web2py控制器中使用d3.js的示例。这对我有用。将d3.js嵌入web2py引导页面

但是，我更愿意在使用web2py的默认引导程序布局的现有引导程序页面中使用d3.js。当我将这个d3.js代码放入引导程序布局中时，它不会导致任何错误，但是我看不到<body>附加<svg>标记。

有人可以发布如何做到这一点的例子吗？

controllers/d3js.py：

view/d3js/histogram.html：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>{{=title}}</title> 
     <script type="text/javascript" src="https://d3js.org/d3.v3.min.js" ></script> 
    </head> 
    <body> 
     <script type="text/javascript"> 

      {{from gluon.serializers import json}} 
      var dataset = {{=XML(json(dataset))}}; 

      //Width and height 
      var w = 600; 
      var h = 600; 
      ... 

      //Create SVG element 
      var svg = d3.select("body") 
         .append("svg") 
         .attr("width", w) 
         .attr("height", h); 

      ... 

     </script> 
    </body> 
</html>

的this d3.js sample来源是斯科特·默里的书，Interactive Data Visualizations for the Web。

来源

2015-12-17 ChrisGuest

上面的代码工作？ *当我将这个d3.js代码放入引导程序布局*时，代码的外观如何？ – Mark

在/views/default/histogram.html，如果您有：

{{extend 'layout.html'}} 
[Your D3 HTML code]

，因为一切都被插入其中{{include}}出现的layout.html，这是内{{extend}}后声明，这将导致一个问题<body>标签（因此，您在现有的<body>标签内包含新的<html>标签和<body>标签）。

相反，在您的histogram.html视图中，只包含<body>标记内部的HTML部分。在这种情况下，你还需要确保D3库被加载，所以你既可以移动身体内部的<script>标签，或者您也可以通过web2py中的response.files添加：

response.files.append('https://d3js.org/d3.v3.min.js')

来源

2015-12-17 18:05:19 Anthony

将d3.js嵌入web2py引导页面

回答

相关问题