d3 在 Flask 中，使用 Jinja答案

【问题标题】：d3 in Flask, with Jinjad3 在 Flask 中，使用 Jinja
【发布时间】：2015-07-28 18:01:40
【问题描述】：

当我将我的 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？

【问题讨论】：

你见过this example吗？
是的，但如果我的 d3 在 base.html 中，一切运行正常。我希望将我的 d3 放在模板扩展中。

标签： d3.js flask jinja2

【解决方案1】：

可能发生的情况是 d3 代码在 dom 准备好之前运行。您可以尝试将 div 移到 script 标签上方，或者更好地在 document ready hook 上运行您的 d3 代码。

另外，为所有脚本定义一个单独的 jinja 块也不错

【讨论】：