將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引導頁面

回答

相關問題