Question

当我将我的d3代码直接放入我的base.html时，它运行时没有任何问题，但是当我将它放入扩展模板时，除了模板中的静态文本之外什么也没有显示。我没有导入任何数据。我已经尝试将我的脚本标记从base.html移动到index.html，但这没有产生影响。

base.html文件：

<html>
  <head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> 
  </head>
  <body>
  {% block content %}{% endblock %}
  </body>
</html>

的index.html：

{% extends "base.html" %} {% block content %}
<h1>hks;dhf;</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
  var circles = [30, 70, 110];

  var container = d3.select("div").append("svg")
    .attr("width", 200)
    .attr("height", 200);

  var circles = container.selectAll("circle")
    .data(circles)
    .enter()
    .append("circle");
  console.log("here it is")

  var circleAttributes = circles
    .attr("cx", function(d) {
      return d;
    })
    .attr("cy", function(d) {
      return d;
    })
    .attr("r", 20)
    .style("fill", function(d) {
      var returnColor;
      if (d === 30) {
        returnColor = "green";
      } else if (d === 70) {
        returnColor = "purple";
      } else if (d === 110) {
        returnColor = "red";
      }
      return returnColor;
      console.log(circles);
    });
</script>

<div>
</div>
{% endblock %}

如何在Flask模板扩展上显示带有静态数据的d3？

Answer 1

可能发生的是d3代码在dom准备好之前运行。您可以尝试将div移到脚本代码上方，甚至可以更好地在document ready hook上运行d3代码。

为所有脚本定义单独的jinja块也不是一个坏主意

d3在Flask中，与Jinja一起

1 个答案: