gpt4 book ai didi

d3.js - Flask 中的 d3,与 Jinja

转载 作者:行者123 更新时间:2023-12-03 16:12:07 25 4
gpt4 key购买 nike

当我将我的 d3 代码直接放入我的 base.html 中时,它运行没有任何问题,但是当我将它放入一个扩展模板中时,除了模板中的静态文本外什么也没有显示。我没有导入任何数据。我试过将我的脚本标签从 base.html 移到 index.html,但这没有效果。

基础.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?

最佳答案

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

另外,为所有脚本定义一个单独的 jinja block 也不是一个坏主意

关于d3.js - Flask 中的 d3,与 Jinja,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31683879/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com