我有一个烧瓶应用程序:
@app.route('/test')
def test():
return render_template('index.html')
在index.html中我有:
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
.node {
cursor: pointer;
}
.overlay{
background-color: #e6d1ee;
}
.node circle {
fill: #fff;
stroke: #4d4bb4;
stroke-width: 2px;
}
.node text {
font-size:10px;
font-family:sans-serif;
}
.link {
fill: none;
stroke: #7acc7e;
stroke-width: 2px;
}
.templink {
fill: none;
stroke: #ff8285;
stroke-width: 3px;
}
.ghostCircle.show{
display:block;
}
.ghostCircle, .activeDrag .ghostCircle{
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="MyTree.js"></script>
<body>
<div id="tree-container"></div>
</body>
当我在浏览器中运行此html代码时,它显示了一个很好的graph
但是后来我使用带有render_template的烧瓶渲染它,它显示了绝对的注意
我该如何解决?
很抱歉这个巨大的代码块,我不确定这是否是html问题
UPD:
实际上是的,问题出在静态的东西上。现在我的浏览器可以获取js文件。但另一个问题出现了。在MyTree.js我正在使用
treeJSON = d3.json("{{ url_for('static', filename='dota.json') }}", function(error, treeData)
并且dota.json未在浏览器中加载。但它与MyTree.js在同一个目录中,在静态目录中。
答案 0 :(得分:2)
我想说,目前您的MyTree.js文件未被浏览器提取(您可以在开发者控制台中查看)。您需要将MyTree.js文件放在静态目录中,并在HTML中引用静态端点:
<script src="{{ url_for('static', filename='MyTree.js') }}"></script>